JavaScript：原生JS实现图片懒加载

来源：互联网发布：c 并行编程编辑：程序博客网时间：2024/05/18 00:25

为什么要懒加载

懒加载（LazyLoad）是前端优化的一种有效方式，极大的提升用户体验，图片一直是页面加载的流浪大户，现在一张图片几兆已经是很正常的事，远远大于代码的大小。倘若一次ajax请求过来10张图片的地址，我想如果你一次性把10张图片都加载出来，肯定是不合理的。

第一：会显示的很慢，多加载1秒都会引起用户的流失，这对靠流量的网站来说绝对是噩梦。
第二：用户如果只是随便看看，没想全部看，这无疑是浪费了用户很多流量。

什么是懒加载

在图片非常多的应用场景，为了提高页面加载速度，改善用户体验，我们对未出现在视野范围内的图片先不进行加载，等到出现在视野范围才去加载。

懒加载的实现原理

原理很简单，先把img的src指向空或者一个小图片，图片真实的地址存储在img一个自定义的属性里,< img src=”” data-src=”http://real.com/real.jpg” />,等到此图片出现在视野范围内了，获取img元素，把data-src里的值赋给src。

前驱知识

我前面的博客都有详细介绍，这里不再赘述

clientHeightscrollTopoffsetTopscrollHeight

实现代码

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>LazyLoad</title>    <style type="text/css">        img {            display: block;            width: 500px;            height: 400px;        }    </style></head><body>    <img src="" guoyu-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">    <img src="" guoyu-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">    <img src="" guoyu-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">    <img src="" guoyu-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">    <img src="" guoyu-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">    <img src="" guoyu-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">    <img src="" guoyu-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">    <script type="text/javascript">        var aImg = document.querySelectorAll('img');        var len = aImg.length;        var n = 0;//存储图片加载到的位置，避免每次都从第一张图片开始遍历        window.onscroll = function() {            var seeHeight = document.documentElement.clientHeight;            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;            for (var i = n; i < len; i++) {                if (aImg[i].offsetTop < seeHeight + scrollTop) {                    if (aImg[i].getAttribute('src') == '') {                        aImg[i].src = aImg[i].getAttribute('guoyu-src');                    }                    n = i + 1;                    console.log('n = ' + n);                }            }        };    </script></body></html>

初始状态，无图

滚动一下，加载两个图
滚动一下加载两个图

这里写图片描述

滚动到第三张图的位置，加载到第三张图

这里写图片描述

以此类推

阅读全文

1 0