html+JS实现图片懒加载

什么是懒加载

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

为什么要懒加载

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

懒加载的实现原理

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>LazyLoad</title>
    <style type="text/css">
        img {
            display: block;
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>




    <img src="https://s1.ax1x.com/2018/12/27/FRkT8s.png" guoyu-src="https://s1.ax1x.com/2018/12/27/FRk2KP.jpg">
    <img src="https://s1.ax1x.com/2018/12/27/FRkT8s.png" guoyu-src="https://s1.ax1x.com/2018/12/27/FRk6gI.jpg">
    <img src="https://s1.ax1x.com/2018/12/27/FRkT8s.png" guoyu-src="https://s1.ax1x.com/2018/12/27/FRkWb8.jpg">
    <img src="https://s1.ax1x.com/2018/12/27/FRkT8s.png" guoyu-src="https://s1.ax1x.com/2018/12/27/FRkcvt.jpg">
    <img src="https://s1.ax1x.com/2018/12/27/FRkT8s.png" guoyu-src="https://s1.ax1x.com/2018/12/27/FRkRDf.jpg">


    <script type="text/javascript">
        var aImg = document.querySelectorAll('img');
        var len = aImg.length;
        var n = 0;//存储图片加载到的位置，避免每次都从第一张图片开始遍历
		var defaul='https://s1.ax1x.com/2018/12/27/FRkT8s.png'; //默认小图
        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') == defaul) {
                        aImg[i].src = aImg[i].getAttribute('guoyu-src');
                    }
                    n = i + 1;
                }
            }
        };
    </script>
</body>
</html>

声明: 本文采用 BY-NC-SA 协议进行授权，如无注明均为原创，转载请注明转自一颗大萝北
本文地址: html+JS实现图片懒加载