延时加载图片

前端入坑纪 45

今天来分享个已经满大街的效果，如题，原理很简单，其实全靠一个getBoundingClientRect这货。

好，详解如下！

OK，first things first！ github项目地址

这个截图有点长

HTML 结构

    <ul>
        <li>
            ![](wrap/img/img.jpg)
        </li>
        <li>
            ![](wrap/img/img.jpg)
        </li>
        <li>
            ![](wrap/img/img.jpg)
        </li>
        <li>
            ![](wrap/img/img.jpg)
        </li>
        <li>
            ![](wrap/img/img.jpg)
        </li>
        <li>
            ![](wrap/img/img.jpg)
        </li>
    </ul>

一个ul 放上6个li，每个li里面的图片先预设个图片占位。真正的图片地址放到自定义data-src属性里。

CSS 结构

        ul,
        li {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        li {
            text-align: center;
        }
        
        li img {
            padding: 2.6rem 0;
            width: 90%
        }

没啥特殊，让图片包含在多个竖向屏幕内。

JavaScript 结构

        var wh = window.innerHeight;  // 获取屏幕高度
        var imgs = document.getElementsByTagName("img"); // 获取所有图片

        // 滑动屏幕时，执行加载图片的操作
       window.onload  = window.onscroll = function() {
            for (var i = 0; i < imgs.length; i++) {   
                var imgTop = imgs[i].getBoundingClientRect().top;// 获得图片相对于屏幕视窗顶部的距离
                if (wh >= imgTop) {
                    // 如果距离小于等于屏幕的高度，也就是图片已经可见，那就替换对应的实际图片地址
                    imgs[i].setAttribute("src", imgs[i].getAttribute("data-src"))
                }
            }
        }

此效果关键还是在于getBoundingClientRect()，具体的，小伙伴百度查看细节说明！

好了，到此，本文告一段落！感谢您的阅读！祝您和您的家人身体健康，阖家幸福！