js 函数的多图片懒加载(lazy) 带插件版完整解析

前言：

本人纯小白一个，有很多地方理解的没有各位大牛那么透彻，如有错误，请各位大牛指出斧正！小弟感激不尽。

本篇文章为您分析一下原生JS实现图片懒加载效果

页面需求

 1. 在用户刚刚进入页面时，先加载首屏的所有图片，如果用户还想看更多的图片，当用户滑动滚动条时再加载出现在视口内的图片。

HTML结构


    <div class="lazy">
        <img src="default.png" alt=""
            data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=148443545,806875479&fm=26&gp=0.jpg">
        <img src="default.png" alt=""
            data-src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3001021586,810308097&fm=26&gp=0.jpg">
        <img src="default.png" alt=""
            data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588786712&di=ffcad1073ba07e3af701348e14613cc2&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn01%2F246%2Fw640h406%2F20180904%2Fd41c-hiqtcan7167756.jpg">
        <img src="default.png" alt=""
            data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588786712&di=f68274504cf3e1d9a8f32d19bc305154&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw640h426%2F20180112%2F69ae-fyqnick8791762.jpg">
        <img src="default.png" alt=""
            data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588786711&di=049d837a5c9d2dc98ff53c48d4557160&imgtype=0&src=http%3A%2F%2Fpicture.ik123.com%2Fuploads%2Fallimg%2F141031%2F17-141031160326.jpg">
        <img src="default.png" alt=""
            data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588786710&di=f87e22bfe5da4ea2d088519f8958816f&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Ffront%2F331%2Fw870h1061%2F20180915%2FK-2y-hikxxna1448280.jpg">
        <img src="default.png" alt=""
            data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588786709&di=bc67716679d7234d4082886458a5d8cb&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F65%2F01%2F19300001035357130795018787137_950.jpg">
        <img src="default.png" alt=""
            data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588786708&di=7ba455ddcd0537f5ef51c8fff325e865&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201511%2F24%2F20151124145437_w4dVB.jpeg">
        <img src="default.png" alt=""
            data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588786707&di=9fb358257a48fe9c79c72c4fc656e6b1&imgtype=0&src=http%3A%2F%2F00.minipic.eastday.com%2F20160906%2F20160906153420_f9b85f408460d00488f5f9e813b7e2a7_6.jpeg">
        <img src="default.png" alt=""
            data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588786804&di=64c75d1d8ecf82693e58766e8b606873&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fpic%2Fitem%2Fcd5bb743ad4bd1136235f0ce5aafa40f49fb059b.jpg">
        <img src="default.png" alt=""
            data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588786804&di=e53121cfa8f2448ee5758372d9f80a45&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20180512%2F50ad001e559b4eb1b9c22aca65b0640d.jpeg">
        <img src="default.png" alt=""
            data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588786803&di=32564289c9ffb12d0747d122cf82751b&imgtype=0&src=http%3A%2F%2Fpic25.photophoto.cn%2F20121021%2F0035035953679533_b.jpg">
        <img src="default.png" alt=""
            data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588786803&di=065a222054f9aa35a6d80214c12bd210&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw562h464%2F20180119%2F8f01-fyqtwzu8355015.jpg">
        <img src="default.png" alt=""
            data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588786802&di=53c06ed741f89e6ebf92a8f60c0eae57&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn17%2F307%2Fw640h467%2F20180709%2F6458-hezpzwu1922800.jpg">
        <img src="default.png" alt=""
            data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588958074&di=d09f2d50db3a63d0d5a3b5484dcaf2ba&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw558h559%2F20180211%2Fe4bf-fyrkuxt5566269.jpg">
        <img src="default.png" alt=""
            data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588958074&di=ab6c49cc5a1be598a1fa279a36a3e817&imgtype=0&src=http%3A%2F%2Fpic.makepolo.net%2Fnews%2Fallimg%2F20161228%2F1482940135505940.jpg">
        <img src="default.png" alt=""
            data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588958073&di=9a19d89171e8585e8ed5f19dbab33149&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn13%2F56%2Fw499h357%2F20181114%2Fb7e5-hnvukfe8184806.jpg">
        <img src="default.png" alt=""
            data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588958073&di=d81b5a7c3a09ce927c35c753251a3175&imgtype=0&src=http%3A%2F%2Fp3.ssl.cdn.btime.com%2Ft01c26630ad64f0175c.png%3Fsize%3D640x572">
        <img src="default.png" alt=""
            data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588958072&di=bf97ec847c6c10e4a0f3986dafca641b&imgtype=0&src=http%3A%2F%2Fupload.northnews.cn%2F2016%2F0905%2Fthumb_900_600_1473046880257.jpg">
        <img src="default.png" alt=""
            data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588958072&di=b445562cc398823b2fd859eec5312ba3&imgtype=0&src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20181025%2F21%2F1540472811-DTyBFexQio.jpg">
        <img src="default.png" alt=""
            data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588958069&di=64a0b81403b9a96b9cd3b4da5c2cd96b&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20141225%2Fmp620837_1419522163024_10.jpeg">
        <img src="default.png" alt=""
            data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588958066&di=dde85061135c43dc536cc983fa0e557e&imgtype=0&src=http%3A%2F%2Fwww.xiao89.com%2Fuploads%2Fallimg%2F190605%2F10-1Z605154546.jpg">
        <img src="default.png" alt=""
            data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588958066&di=956eb9de655a8879bcf015a953892104&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Ffront%2F480%2Fw640h640%2F20180920%2FrTAl-hikxxna3627881.jpg">
        <img src="default.png" alt=""
            data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588958065&di=88d01b1a1134ada3b601eb2c733379d3&imgtype=0&src=http%3A%2F%2Fimg.boqiicdn.com%2FData%2FBK%2FA%2F1811%2F2%2Fimg60655bdbcdef8b269_o.jpg">
        <img src="default.png" alt=""
            data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586589478110&di=56192deca9c7e85508b2075e91ad55b2&imgtype=0&src=http%3A%2F%2Fcdn6.hbimg.cn%2Fstore%2Fwm%2Fbigfiles%2F201351%2FD52586DA90B7D8B4D4A8CBC334.jpg">
    </div>

CSS样式


        .lazy {
            position: relative;
            text-align: center;
        }

        .lazy img {
            width: 327px;
            height: 275px;
        }

JS行为

JS大致思路

 1. 获取滚动条高度      

 2. 获取浏览器视口的高度

 3. 循环每一张图片并获取到每一张图片的高度偏移量

 4. 如果当前的图片偏移量 < 滚动条的位置高度 + 浏览器窗口高度  （能出现在视口，我们正常能看见的区域）

 5. 如果不是下载完再执行的情况

 6. 根据图片的data-src属性设置图片的真实路径


        var dom = document.querySelectorAll(".lazy img"); // 获取所有的图片
        function lazy() {
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; // 获取滚动条的高度
            var windowHeight = window.innerHeight;  // 获取视口高度
            for (var i = 0; i < dom.length; i++) {
                var imgHeight = dom[i].offsetTop;  // 每张图片的偏移量
                if (imgHeight < scrollTop + windowHeight) {  // 判断
                    (function (j) {
                        setTimeout(function () {  // 用一个定时器，延迟多少秒后再渲染图片
                            var newImage = new Image();  // 创建图片对象
                            newImage.src = dom[j].getAttribute("data-src");  // 图片存储临时空间
                            newImage.onload = function() {
                                dom[j].src = dom[j].getAttribute("data-src"); // 设置图片的正确路径
                            }
                        },2000);
                    })(i)
                }
            }
        }
        // 当滑动滚动条时
        window.onscroll = lazy;
        lazy();

这样图片的懒加载效果就完成了。下面来看一看插件版的使用方式

插件版JS代码（lazy.js）


if (!window.myPlugin) {
    window.myPlugin = {};
}

/**
 * 图片懒加载
 * @param { Object } dom 传入需要懒加载的图片元素
 * @param { Number } time 加载需要的时间
 */
window.myPlugin.lazy = function (dom,time) {
    // 获取滚动条的位置高度 兼容处理 谷歌浏览器只认识document.body.scrollTop;  其他浏览器document.documentElement.scrollTop;
    var scrollHeight = document.body.scrollTop || document.documentElement.scrollTop;
    // 获取浏览器窗口高度  包含下面的滚动条高度
    var windowHeight = window.innerHeight;
    // 循环获取到每张图片
    for (var i = 0; i < dom.length; i++){
        // 获取每张图片距离页面上方的偏移量   注意offset的一些坑，offset并不是子元素相对于父元素的，而是相对于定位元素
        var imgHeight = dom[i].offsetTop;
        // 如果当前的图片偏移量 < 滚动条的位置高度 + 浏览器窗口高度  （能出现在视口，我们正常能看见的区域）
        if (imgHeight < scrollHeight + windowHeight) {
            (function (i) { // 此处为啥要使用立即执行函数，因为setTimeout是异步执行的
                setTimeout(function () {
                    var newImage = new Image();                       // 创建原始图片对象
                    newImage.src = dom[i].getAttribute("data-src");   // 图片临时存储空间
                    newImage.onload = function () {                   // 当图片资源加载完成后
                        dom[i].src = dom[i].getAttribute("data-src"); // 设置图片的正确路径
                    }
                },time);
            })(i);
        }
    }
    // 滚动时再次加载
    window.onscroll = function () {
        this.myPlugin.lazy(dom,time);
    }
}

使用时这样使用


    <script src="../../plugin/lazy.js"></script>
    <script>
        var dom = document.querySelectorAll(".lazy img")
        this.myPlugin.lazy(dom,2000);
    </script>

结语

整完！

js 函数的多图片懒加载(lazy) 带插件版完整解析的更多相关文章

js 函数的多图片预加载(preload) 带插件版完整解析
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS实现图片预加载效果本篇文章写的 ...
[js开源组件开发]图片懒加载lazyload
图片懒加载lazyload 前端对请求的一种优化方式,为什么叫懒加载,无从查起,反正我当初一直认为它是滚动加载的一种类型.它主要是以图片或背景在可视区域内时才显示真正的图片,减少src带来的负荷.所以 ...
Zepto picLazyLoad Plugin，图片懒加载的Zepto插件
嗯,学着国外人起名字Zepto picLazyLoad Plugin确实看起来高大上,其实js代码没几句,而且我每次写js都捉襟见肘,泪奔--- 图片懒加载有很多js插件,非常著名的属jQuery的L ...
Vue图片懒加载之lazyload插件使用
当内容没有加载完的时候,用户体验不是很好,这时候,可以使用lazyload这个插件,提升用户体验,使用方法特别简单易用一. vue lazyload插件: 插件地址:https://github.c ...
VUE图片懒加载-vue lazyload插件的简单上手使用（优化版本）
在用VUE做项目开发的过程中,首页用到了懒加载的方法,查找了一些方法,觉得官网写得太复杂,有一篇博客不错(https://www.cnblogs.com/xyyt/p/7650539.html),但是 ...
VUE图片懒加载-vue lazyload插件的简单使用
序:vue项目时候,我们要对图片进行懒加载处理,这个开发项目中就不需要自己去写了,因为比较方便使用vue lazyload进行处理,高效率开发一. vue lazyload插件: 插件地址:http ...
001_Chrome 76支持原生HTML 图片懒加载Lazy loading
Table Of Content 什么是懒加载? 语法参数及使用方式? 有哪些特点? 与js有关的实践什么是懒加载? 技术背景 Web应用需要经常向后台服务器请求资源(通过查询数据库,是非常耗时耗资 ...
JS图片懒加载
简介当页面图片太多时,加载速度就会很慢.尤其是用2G/3G/4G访问页面,不仅页面慢,而且还会用掉很多流量.图片懒加载的原理就是将页面内所有需要加载的图片全部换成一张默认的图片(一般尺寸很小),只有 ...
[jQuery插件]手写一个图片懒加载实现
教你做图片懒加载插件那一年那一年,我还年轻刚接手一个ASP.NET MVC 的 web 项目, (C#/jQuery/Bootstrap) 并没有做 web 的经验,没有预留学习时间, (作为项 ...

随机推荐

从 Socket 编程谈谈 IO 模型（三）
快过年啦,估计很多朋友已在摸鱼的路上.而我为了兄弟们年后的追逐,却在苦苦寻觅.规划,导致文章更新晚了些,各位猿粉谅解. 上期分享,我们结合新春送祝福的场景,通过一坨坨的代码让 BIO.NIO 编程过程 ...
直播 | Apache Kylin & Apache Hudi Meetup
千呼万唤始出来,Meetup 直播终于来啦- 本次线上 Meetup 由 Apache Kylin 与 Apache Hudi 社区联合举办,将于 3 月 14 日晚进行直播,邀请到来自丁香园.腾讯. ...
Spring（三）：bean的自动装配
Bean的自动装配自动装配是Spring满足bean依赖的一种方式. Spring会在上下文中自动寻找,并自动给bean装配属性 Spring中三种装配方式在xml中显式的配置. 在java中显式 ...
Js异步机制的实现
Js异步机制 JavaScript是一门单线程语言,所谓单线程,就是指一次只能完成一件任务,如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推.这种模式的好处是实现起来比较简单 ...
AJ学IOS（41）UI之核心动画两行代码搞定3D转场
AJ分享,必须精品效果: 代码: 其实代码很少,苹果都给封装好了 // 1.创建核心动画 CATransition *ca = [CATransition animation]; // 1.1动画过 ...
AJ学IOS（03）UI之纯代码实现UI——图片查看器
AJ分享,必须精品先看效果主要实现类似看新闻的一个界面,不用拖拽,纯代码手工写. 首先分析app可以很容易知道他这里有两个UILabel一个UIImageView还有两个UIButton 定义UI ...
深入理解new运算符
在 JavaScript 中,new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例.创建一个对象很简单,为什么我们还要多此一举使用 new 运算符呢?它到底有什么样的魔力? 认 ...
substr和substring之间的区别
substr 和 substring都是JS 截取字符串函数,两者用法很相近,下面是两者的语法很示例: substr 方法返回一个从指定位置开始的指定长度的子字符串.stringvar.substr ...
Kaggle入门——泰坦尼克号生还者预测
前言这个是Kaggle比赛中泰坦尼克号生存率的分析.强烈建议在做这个比赛的时候,再看一遍电源<泰坦尼克号>,可能会给你一些启发,比如妇女儿童先上船等.所以是否获救其实并非随机,而是基于一 ...
Gatling脚本编写技巧篇（一）
一.公共类抽取熟悉Gatling的同学都知道Gatling脚本的同学都知道,Gatling的脚本包含三大部分: http head配置 Scenario 执行细节 setUp 组装那么针对三部分我 ...

js 函数的多图片懒加载(lazy) 带插件版完整解析

前言：

页面需求

HTML结构

CSS样式

JS行为

JS大致思路

插件版JS代码 （lazy.js）

结语

js 函数的多图片懒加载(lazy) 带插件版完整解析的更多相关文章

随机推荐

热门专题

插件版JS代码（lazy.js）