图片懒加载

青旅半醒 2022-11-16 13:41 322阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70][]

如果：offsetTop-scrollTop<clientHeight，则图片进入了可视区内，则被请求；

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>图片懒加载</title>
        <style>
            img {
                display: block;
                width: 100%;
                height: 300px;
                margin-bottom: 20px;
            }
        </style>
    </head>
    <body>
        <img data-src="./images/1.jpg" alt="">
        <img data-src="./images/2.jpg" alt="">
        <img data-src="./images/3.jpg" alt="">
        <img data-src="./images/4.jpg" alt="">
        <img data-src="./images/5.jpg" alt="">
        <img data-src="./images/6.jpg" alt="">
        <img data-src="./images/7.jpg" alt="">
        <img data-src="./images/8.jpg" alt="">
        <img data-src="./images/9.jpg" alt="">
        <img data-src="./images/10.jpg" alt="">
        <img data-src="./images/1.jpg" alt="">
        <img data-src="./images/2.jpg" alt="">
    </body>
    <script>
            var imgs = document.querySelectorAll('img');
    
            //offsetTop是元素与offsetParent的距离，循环获取直到页面顶部
            function getTop(e) {
                var T = e.offsetTop;
                while(e = e.offsetParent) {
                    T += e.offsetTop;
                }
                return T;
            }
    
            function lazyLoad() {
                var H = document.documentElement.clientHeight;//获取可视区域高度
                var S = document.documentElement.scrollTop || document.body.scrollTop;
                for (var i = 0; i < imgs.length; i++) {
                    if (H + S > getTop(imgs[i])) { // clientHeight + scrollTop > offsetTop
                        imgs[i].src = imgs[i].getAttribute('data-src');
                    }
                }
            }
              function throttling(callback, delay = 1000) {
                    let timer = null
                    return function () {
                      if (timer) return
                      timer = setTimeout(() => {
                        callback()
                        timer = null
                      }, delay)
                }
              }
            window.onload = window.onscroll = throttling(lazyLoad);
    </script>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70]: /images/20221022/4621f92880c94f519a36829cfcbea245.png