1.懒加载的作用和原理

　　在我们展示多图片的场景下，类似淘宝或者百度图片，由于图片的数目过多，全部从服务器请求会给用户糟糕的用户体验，为了提升用户体验，我们这里使用懒加载，随着下拉逐步加载。

　　每个图片的src会有一个get请求，我们把不能看到的图片src设置为相同的图片，这些图片发一次请求即可，设置属性data-src为真正的图片路径。当图片滚动到可视区，我们就用js把data-src 赋值给 src，简单的懒加载就可以实现了。

2.简单的js实现懒加载

//你需要一张timg.png图片

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        img{

            display: block;

            width: 700px;

            height: 400px;

        }

    </style>

</head>

<body>

    <ul class="img-group">

        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158197&di=8845befd9fbda1e99e565b9c2298be50&imgtype=0&src=http%3A%2F%2Fuploads.xuexila.com%2Fallimg%2F1503%2F626-15031G42255b3.jpg"></li>

        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=4a38d248001c145c5b4dd31474dedf41&imgtype=0&src=http%3A%2F%2Fpic29.nipic.com%2F20130512%2F11178195_152908769116_2.jpg"></li>

        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=b39e8b14d214b7aa518d7a8328939efb&imgtype=0&src=http%3A%2F%2Fimage16-c.poco.cn%2Fmypoco%2Fmyphoto%2F20141114%2F12%2F4567377520141114124637053.jpg%3F1024x684_120"></li>

        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=f2e7a6ffbfa3f92025c91e6180b5e317&imgtype=0&src=http%3A%2F%2Ffile31.mafengwo.net%2FM00%2F3F%2F26%2FwKgBs1gXBQuAPWGGABOK4vbGpt412.groupinfo.w600.jpeg"></li>

        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158195&di=6a073a070b9cea1214efc0994ed6dde1&imgtype=0&src=http%3A%2F%2Fimages3.ctrip.com%2Fwri%2Fimages%2F200610%2F100602312604121954734.jpg"></li>

        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158195&di=a9436d83f55b301d1df9cd24f6e367e7&imgtype=0&src=http%3A%2F%2Fcyjctrip.qiniudn.com%2F69015%2F1379755311203p184vt4juft5p1t8q1andgp5ijn11.jpg"></li>

        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158195&di=2b6bc6b871d4f7f267169dfcfb727f84&imgtype=0&src=http%3A%2F%2Fcyjctrip.qiniudn.com%2F106357%2F1395933091608p18k21ek6kvj1gv2ta910kn1002m.jpg"></li>

    </ul>

<script type="text/javascript">

        let imgArr = document.querySelectorAll('img');

        let len = imgArr.length;

        window.onscroll = function () {

            let seeHeight = document.documentElement.clientHeight;

            console.log("seeHeight ="+seeHeight);

            let scrollTop =  document.body.scrollTop || document.documentElement.scrollTop;

            console.log("scrollTop ="+scrollTop);

            for(let i=0; i<len; i++){

                console.log(imgArr[i].offsetTop);

                if(imgArr[i].offsetTop < seeHeight + scrollTop){

                        if(imgArr[i].getAttribute('src')=='timg.jpg'){

                            imgArr[i].src = imgArr[i].getAttribute('data-src');

                        }

                }

            }

        }

</script>

</body>

</html>

我们根据js代码分析一下，主要有两部分

1>.如何加载图片?

　　　img.src  = img.getAttribute('data-src');

2>.如何判断是否在可视区

　　　　就是 图片的 offsetTop <  scrollTop + clientHeigth 即可

　　

好了上面就是我们简单的js实现和原理，但是看到各位大佬提到这里有三个需要优化的地方。

1.在初始条件下，应该有图片显示，只要在加载完毕之后滚动之前执行图片的加载即可

2.函数节流，但我们在高频度的滚动时，每隔一段事件开始图片的渲染。实现原理是 加入一个开关变量, 控制每隔固定的一段时间,函数才可能被触发

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        img{

            display: block;

            width: 700px;

            height: 400px;

        }

    </style>

</head>

<body>

    <ul class="img-group">

        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158197&di=8845befd9fbda1e99e565b9c2298be50&imgtype=0&src=http%3A%2F%2Fuploads.xuexila.com%2Fallimg%2F1503%2F626-15031G42255b3.jpg"></li>

        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=4a38d248001c145c5b4dd31474dedf41&imgtype=0&src=http%3A%2F%2Fpic29.nipic.com%2F20130512%2F11178195_152908769116_2.jpg"></li>

        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=b39e8b14d214b7aa518d7a8328939efb&imgtype=0&src=http%3A%2F%2Fimage16-c.poco.cn%2Fmypoco%2Fmyphoto%2F20141114%2F12%2F4567377520141114124637053.jpg%3F1024x684_120"></li>

        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=f2e7a6ffbfa3f92025c91e6180b5e317&imgtype=0&src=http%3A%2F%2Ffile31.mafengwo.net%2FM00%2F3F%2F26%2FwKgBs1gXBQuAPWGGABOK4vbGpt412.groupinfo.w600.jpeg"></li>

        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158195&di=6a073a070b9cea1214efc0994ed6dde1&imgtype=0&src=http%3A%2F%2Fimages3.ctrip.com%2Fwri%2Fimages%2F200610%2F100602312604121954734.jpg"></li>

        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158195&di=a9436d83f55b301d1df9cd24f6e367e7&imgtype=0&src=http%3A%2F%2Fcyjctrip.qiniudn.com%2F69015%2F1379755311203p184vt4juft5p1t8q1andgp5ijn11.jpg"></li>

        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158195&di=2b6bc6b871d4f7f267169dfcfb727f84&imgtype=0&src=http%3A%2F%2Fcyjctrip.qiniudn.com%2F106357%2F1395933091608p18k21ek6kvj1gv2ta910kn1002m.jpg"></li>

    </ul>

<script type="text/javascript">

        let imgArr = document.querySelectorAll('img');

        let len = imgArr.length;

        let n = 0; //记录加载图片的位置，避免从第一张开始加载

        let canrun = true;

        let seeHeight = document.documentElement.clientHeight;

        console.log("seeHeight ="+seeHeight);

        lazyLoad();

        window.onscroll = function () {

            if(!canrun){

                return ;

            }

            canrun = false;

            setTimeout(function () {

                console.log('*****');

                lazyLoad();

                canrun= true;

            },1000);

        }

        function lazyLoad() {

            let scrollTop =  document.body.scrollTop || document.documentElement.scrollTop;

            console.log("scrollTop ="+scrollTop);

            for(let i=0; i<len; i++){

                console.log(imgArr[i].offsetTop);

                if(imgArr[i].offsetTop < seeHeight + scrollTop){

                    if(imgArr[i].getAttribute('src')=='timg.jpg'){

                        imgArr[i].src = imgArr[i].getAttribute('data-src');

                    }

                    n = i+1;

                    console.log("n="+n);

                }

            }

        }

</script>

</body>

</html>

这是以上的两个优化之后的代码。

懒加载js实现和优化的更多相关文章

  1. vue-router和webpack懒加载，页面性能优化篇

    在vue单页应用中,当项目不断完善丰富时,即使使用webpack打包,文件依然是非常大的,影响页面的加载.如果我们能把不同路由对应的组件分割成不同的代码块,当路由被访问时才加载对应的组件(也就是按需加 ...

  2. vue 组件按需引用，vue-router懒加载，vue打包优化，加载动画

    当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 结合 Vue 的 异步 ...

  3. 基于jquery的图片懒加载js

    function lazyload(option){ var settings={ defObj:null, defHeight: }; settings=$.extend(settings,opti ...

  4. JS实现图片懒加载插件

    一.前言 我在前几篇博客的记录中,有说自己在做一个图片懒加载的功能,然后巴拉巴拉的遇到哪些问题,结果做完了也没对懒加载这个功能做一些记录,所以这篇文章主要针对我所实现的思路,以及代码做个记录,实现不佳 ...

  5. VUE项目性能优化实践——通过懒加载提升页面响应速度

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 最近我司因业务需求,需要在一个内部数据分析平台集成在线Excel功能,既然我 ...

  6. 原生js开发，无依赖、轻量级的现代浏览器图片懒加载插件，适合在移动端开发使用

    优势 1.原生js开发,不依赖任何框架或库 2.支持将各种宽高不一致的图片,自动剪切成默认图片的宽高 比如说你的默认图片是一张正方形的图片,则各种宽度高度不一样的图片,自动剪切成正方形. 完美解决移动 ...

  7. js, javascript 图片懒加载 实例代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 如何使用echo.js实现图片的懒加载（整理）

    如何使用echo.js实现图片的懒加载(整理) 一.总结 一句话总结:a.在img标签中添加data-echo属性加载真实图片:<img class="loading" sr ...

  9. 原生js - 两种图片懒加载实现原理

    目前图片懒加载的方式主要有两种: 1.利用getBoundingClientRectAPI得到当前元素与视窗的距离来判断 2.利用h5的新API IntersectionObserver 来实现 ge ...

随机推荐

  1. Ionic2中的Navigation.md

    1. 概述 为了能够得到同原生应用类似的导航效果,Ionic创建了几个navagation组件来实现pages之间的导航操作,这种导航跟原生Angular2中的route机制是不一样的,我们可以借助于 ...

  2. Spring控制反转容器的使用例子

    详细代码如下: spring-config.xml <?xml version="1.0" encoding="UTF-8"?> <beans ...

  3. PostgreSQL Replication之第五章 设置同步复制（2）

    5.2 理解实际影响和性能 在本章中,我们已经讨论了实际影响以及性能影响.但是,有什么好的理论性的例子吗?让我们做一个简单的基准测试,看看复制是怎么做的.我们做这样的测试来为您显示各种耐久性的级别不只 ...

  4. ip代理池的爬虫编写、验证和维护

    打算法比赛有点累,比赛之余写点小项目来提升一下工程能力.顺便陶冶一下情操 本来是想买一个服务器写个博客或者是弄个什么FQ的东西 最后刷知乎看到有一个很有意思的项目,就是维护一个「高可用低延迟的高匿IP ...

  5. [BZOJ2821]作诗(分块）

    题意 N个数,M组询问,每次问[l,r]中有多少个数出现正偶数次对于100%的数据,1≤n,c,m≤105 题解 (传说lyd省选的时候看错题   把题看成这个了   从此又多了一道分块神题)把N个数 ...

  6. 《转载》编程入门指南 v1.4

    编程入门指南 v1.4 Badger · 8 个月前 作者:@萧井陌, @Badger 自由转载-非商用-非衍生-保持署名 | Creative Commons BY-NC-ND 3.0 CoCode ...

  7. 软raid 实验

    RAID0 条带卷 2+ 100% 读写速度快,不容错 RAID1 镜像卷 2 50% 读写速度一般,容错 RAID5 带奇偶校验的条带卷 3+ (n-1)/n 读写速度快,容错,允许坏一块盘 RAI ...

  8. 钓鱼WIFI的防范

    实际上,Wi-Fi接入点(AP).路由器和热点常常是高度暴露的攻击面.用户一不小心就有可能踏进攻击者设置的Wi-Fi陷阱,为企业造成信息泄露或经济损失. 如今Wi-Fi 6时代悄然到来,为高密海量无线 ...

  9. vsCode 快捷键、插件

    插件 参考链接:https://blog.csdn.net/shunfa888/article/details/79606277 快捷键及常用插件:https://www.jianshu.com/p/ ...

  10. 【Henu ACM Round#19 E】 Om Nom and Candies

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 紫书上的原题: 链接 [代码] #include <bits/stdc++.h> #define ll long lon ...