简单高效实现一个按需加载图片的逻辑小白指南_加载使用攻略

需求:根据页面滚动,当图片进入视野,就开始加载,否则不加载任何图片。代码://页面加载完成时先调用一下,首屏内的图片。
loadImg();
document.addEventListener(‘scroll’, function(e) {//跟着滚动,继续加载剩下的图片loadImg()
})function loadImg(){//slice可以将类数组

简单高效实现一个按需加载图片的逻辑小白指南

需求:
根据页面滚动,当图片进入视野,就开始加载,否则不加载任何图片。

简单高效实现一个按需加载图片的逻辑小白指南_加载使用攻略

代码:

//页面加载完成时先调用一下,首屏内的图片。
loadImg();
document.addEventListener('scroll', function(e) {
    //跟着滚动,继续加载剩下的图片
    loadImg()
})

function loadImg(){
     //slice可以将类数组转化成数组对象
    [].slice.call(document.querySelectorAll('[data-src]')).forEach(function(item) {
        // 判断元素是否已经进入视野
        if (item.getBoundingClientRect().y<=innerHeight) {
            //设置src
            item.src = item.getAttribute('data-src');
            //删除data-src属性,可以减少querySelectorAll的查询次数
            item.removeAttribute('data-src');
        }
    })
}
<img data-src="xxx">

代码简单,却很通用,很实用。方便扩展

海计划公众号
(0)
上一篇 2020/03/26 23:33
下一篇 2020/03/26 23:33

您可能感兴趣的内容

  • html页面加载海量数据的实现小白帮助_数据基础知识教程

    题目10w 条记录的数组,一次性渲染到页面上,如何处理可以不冻结UI?
    具体化页面上有个空的无序列表节点 ul ,其 id 为 list-with-big-data ,现需要往列表插入 10w 个 li ,每个列表项的文本内容可自行定义,且要求当每个 li 被单击时,通过 alert 显示列表项内的文本内容。

    <html

    2020/03/26
  • 移动端调起软键盘导致 position:fixed 偏移小白基础_键盘使用教程

    1. 问题描述app内打开H5页面,页面包含input输入框,点击input调起软键盘,输入完成点击下方提交按钮弹出toast时,会出现t toast 跳动的现象,其中:toast采用 position: fixed 进行固定定位2. 分析原因关于 position: fixed首先来看,MDN 中对 position: fixed 的说明:不为元素预留空间

    2020/03/24
  • 程序员如何赚钱使用说明_程序员使用攻略

    作为一个程序员,时常都会想以后自己干不动的时候该怎样办?1. 努力工作每天上班都认认真真,这样就会有好的绩效,年终奖就会多一点。可能公司坑一点的话,年底是没有年终奖的。你不满工资,向上面提出要涨工资。老板看重你的能力,给你涨,一次给你调个1000。可能你这一年就只能调个1000,想要多要点,老板说这是公司制度,每次涨幅是有规定的,给你调1000已经很重视你了

    2020/04/03
  • Aurelia基础入门教程_Aurelia是下一代模块化,简单,可测试的 JS 框架

    Aurelia基础入门 官方网址:http://aurelia.io/ GitHub:https://github.com/aurelia/framework 简介描述:Aurel…

    2020/03/05
  • 前端脚手架的那些事儿小白入门_脚手架菜鸟教程网

    本来早就想写这篇文章的,由于有其他事情耽搁了(可能还是因为太懒),就拖到了现在,如果再不记下来,估计会抛到九霄云外了。NodeJs的出现,让前端工程化的理念不断深入,正在向正规军靠近。先是带来了Gulp、Webpack等强大的构建工具,随后又出现了vue-cli和create-react-app等完善的脚手架,提供了完整的项目架构,让我们可以更多的关注业务,

    2020/03/22
  • css中颜色小白攻略_颜色使用帮助

    颜色如果我们相给页面设置颜色可以采用多种方法进行设置:一、命名颜色假设在设置页面的颜色时觉得一部分很小的颜色集中就足够了,就可以直接给定颜色的名称。CSS称这些有名称的颜色为命名颜色。命名颜色的关键字有限,css定义了17个标准色:浅绿色,黑色,蓝色,紫红色,灰色,橙色,绿色,石灰,栗色,海军,橄榄,紫,红,银,蓝绿色,白色和黄色。颜色名颜色颜色名颜色aqu

    2020/03/24
  • JS禁止打开控制台入门基础_js技巧基础入门

    主要为了通过禁止打开控制台,防止别人进行代码调试。1、禁止右键查看源码和F12//禁止F12键盘事件
    document.addEventListener(‘keydown’, function(event){
    return 123 != event.keyCode || (event.returnValue = false)
    });
    //禁止右键、选择

    2020/03/22
  • 在textarea和input光标处插入内容,支持ie基础知识_光标小白知识

    项目需求,用户要能够输入和点击外面的公式去插入到textaera中,试了好几种方法,有的是在谷歌下好使,在ie下不好使,最后找到了下面这个方法,目前在ie8以上都可以生效。直接上代码 function insertAtCursor(myField, myValue) {//IE supportif (document.selection) {myField

    2020/03/23
  • 网站设计要衡量用户参的KPI入门攻略_用户基础知识

    在网站设计中,网站参与可以网站成功的一个指标,衡量优化效果内容互动指标很重要,会显示内容策略如何与用户保持一致,客户参与度与整体盈利能力相关,以下是一些常见的用户参与指标。网页浏览量,会话数和用户数是用于网站优化的常用指标,是所有用户互动度量标准中最基本的,用于衡量访问网站上特定用户数量。衡量网页浏览量可了解用户访问网站的频率,可以假设更高的指标,搜索引擎是

    2020/03/23
  • 浅谈webpack优化入门指南_webpack入门基础教程

    由于前端的快速发展,相关工具的发展速度也是相当迅猛,各大框架例如vue,react都有自己优秀的脚手架工具来帮助我们快速启动一个新项目,也正式因为这个原因,我们对于脚手架中最关键的一环webpack相关的优化知之甚少,脚手架基本上已经为我们做好了相关的开发准备,但是当我们想要做一些定制化的优化操作时,对webpack的优化也需要有一定的了解,否则无从下手,接

    2020/04/03
  • vue watch对象内的属性监听小白基础_watch使用指南

    watch: {firstName: {handler(newName, oldName) {this.fullName = newName + ‘ ‘ + this.lastName;},// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法immediate: true}
    }
    //复制代码注意到handler了吗,我们

    2020/03/24
  • 简单实现一个vue的双向绑定菜鸟知识_双向绑定基础入门

    首先我们来看一些,vue的基本使用方法new Vue({el:’#app’,data:{price:27,info:{title:’猪肉的价格’},name:23},beforeCreate() {// console.log(this.info)},created(){// console.log(this.info) },beforeMount ()

    2020/03/24
  • node怎么升级?菜鸟指南_node入门百科

    Node.js的开发非常活跃,他的最新稳定版本也频繁变化,所以需要经常的升级Node。 方法一: 用n模板升级nodejsn模块是专门用来管理nodejs的版本# 全局安装n
    $ npm install -g n
    # 升级到最新稳定版
    $ n stable
    # 升级到最新版
    $ n latest
    # 升级到定制版
    $ n v7.10.0
    # 切换使用版本

    2020/03/24
  • 总结Git 不同情况下撤销和如何回滚入门教程_git菜鸟知识

    撤销在未进行git push前的所有操作,都是在“本地仓库”中执行的。我们暂且将“本地仓库”的代码还原操作叫做“撤销”情况一:文件被修改了,但未执行git add操作(working tree内撤销) (modify file) git checkout /.git checkout fileName
    git checkout

    2020/03/31
  • window.location.href的用法(动态输出跳转)基础指南_js知识教程视频

    javascript中的location.href有很多种用法,主要如下。self.location.href=”/url” 当前页面打开URL页面location.href=”/url” 当前页面打开URL页面windows.location.href=”/url” 当前页面打开URL页面,前面三个用法相同。this.location.href=”/url

    2020/04/05
  • YouCompress入门教程_在线免费文件压缩工具

    YouCompress入门教程 官方网址:https://www.youcompress.com/ 简介描述:在线免费文件压缩工具 YouCompress是一个可以在浏览器里直接压…

    2020/03/11