• 代码千万行,注释第一行。命名不规范,同事泪千行。

html+JS实现图片懒加载

前端 Secondar 8个月前 (12-27) 298次浏览 已收录 0个评论

什么是懒加载

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

为什么要懒加载

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

懒加载的实现原理

原理很简单,先把img的src指向空或者一个小图片,图片真实的地址存储在img一个自定义的属性里,< img src=”default” data-src=”https://s1.ax1x.com/2018/12/27/FRk2KP.jpg&#8221; />,等到此图片出现在视野范围内了,获取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实现图片懒加载
喜欢 (0)
[]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址