手撕懒加载

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>LazyLoad</title>
        <style>
            img {
                display: block;
                margin: 0 auto 100px;
                width: 680px;
                height: 810px;
            }
        </style>
    </head>
    <body>
        <img src="" data-src="https://jx3.xoyo.com/zt/2014/11/21/zt/menpai/assets/images/mp-pl/per.png" alt="">
        <img src="" data-src="https://jx3.xoyo.com/zt/2014/11/21/zt/menpai/assets/images/mp-bd/per.png" alt="">
        <img src="" data-src="https://jx3.xoyo.com/zt/2014/11/21/zt/menpai/assets/images/mp-cg/per.png" alt="">
        <img src="" data-src="https://jx3.xoyo.com/zt/2014/11/21/zt/menpai/assets/images/mp-cy/per.png" alt="">
        <img src="" data-src="https://jx3.xoyo.com/zt/2014/11/21/zt/menpai/assets/images/mp-gb/per.png" alt="">
        <img src="" data-src="https://jx3.xoyo.com/zt/2014/11/21/zt/menpai/assets/images/mp-mj/per.png" alt="">
        <img src="" data-src="https://jx3.xoyo.com/zt/2014/11/21/zt/menpai/assets/images/mp-tm/per.png" alt="">
        <img src="" data-src="https://jx3.xoyo.com/zt/2014/11/21/zt/menpai/assets/images/mp-wd/per.png" alt="">
        <img src="" data-src="https://jx3.xoyo.com/zt/2014/11/21/zt/menpai/assets/images/mp-cj/per.png" alt="">
        <img src="" data-src="https://jx3.xoyo.com/zt/2014/11/21/zt/menpai/assets/images/mp-tc/per.png" alt="">
        <img src="" data-src="https://jx3.xoyo.com/zt/2014/11/21/zt/menpai/assets/images/mp-cy/per.png" alt="">
        <img src="" data-src="https://jx3.xoyo.com/zt/2014/11/21/zt/menpai/assets/images/mp-sl/per.png" alt="">
        <img src="" data-src="https://jx3.xoyo.com/zt/2014/11/21/zt/menpai/assets/images/mp-qx/per.png" alt="">

    </body>
    <script>
        var img = document.getElementsByTagName('img');

        //存储图片加载到的位置
        var n = 0;
        // 页面载入完毕加载可视区域内的图片
        lazyLoad();
        // 监听页面滚动事件
        window.onscroll = lazyLoad;

        function lazyLoad() {
            // 可视区高度
            //document.documentElement返回的是文档对象document的根元素的只读属性(如html元素)
            var viewHeight = document.documentElement.clientHeight;
            // 滚动条距离顶部的高度
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            for (var i = n; i < img.length; i++) {
                if (img[i].offsetTop < viewHeight + scrollTop) {
                    if (img[i].getAttribute('src') == '') {
                        img[i].src = img[i].getAttribute('data-src');
                    }
                    n = i + 1;
                }
            }
        }
    </script>
</html>

//使用IntersectionObserve api
const intersectionObserver = new IntersectionObserver((entries) => {
    entries.forEach((item) => {
        if (item.isIntersecting) {
            item.target.src = item.target.dataset.src;
            // 替换成功后，停止观察该dom
            intersectionObserver.unobserve(item.target);
        }
    })
  }, {
      rootMargin: "150px 0px" // 提前150px进入可视区域时就加载图片，提高用户体验
    });

const imgs = document.querySelectorAll('[data-src]');
imgs.forEach((item) => {
    intersectionObserver.observe(item)
});

搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

手撕懒加载

李默

引用和评论

前端知识体系-CSS

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具