js图片懒加载

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title>图片懒加载测试</title>
        <style type="text/css">
            body {
                  text-align: center;
                 }
                
                img {
                  width: 100%;
                  max-width: 300px;
                  height: 200px;
                  margin-bottom: 100px; // 为了方便看效果，将图片尽可能的撑开
                 }
        </style>
    </head>
    <body>
        <div class="img-warpper">
          <img class="lazyload" data-original="https://media3.giphy.com/media/k5GuJn7VslbpGQqHUB/200w.webp">
        </div>
        <div class="img-warpper">
          <img class="lazyload" data-original="https://media1.giphy.com/media/2A7yoKf2B87kotTApZ/200w.webp">
        </div>
        <div class="img-warpper">
          <img class="lazyload" data-original="https://media2.giphy.com/media/3h1rwFW1PpLxD9xLUR/200w.webp">
        </div>
        <div class="img-warpper">
          <img class="lazyload" data-original="https://media0.giphy.com/media/igHgY3xzYxmRcxwZBs/200w.webp">
        </div>
        <div class="img-warpper">
          <img class="lazyload" data-original="https://media0.giphy.com/media/69v5dFsLtzdpaFZz2N/200w.webp">
        </div>
                <div class="img-warpper">
          <img class="lazyload" data-original="https://media0.giphy.com/media/69v5dFsLtzdpaFZz2N/200w.webp">
        </div>
                <div class="img-warpper">
          <img class="lazyload" data-original="https://media0.giphy.com/media/69v5dFsLtzdpaFZz2N/200w.webp">
        </div>
                <div class="img-warpper">
          <img class="lazyload" data-original="https://media0.giphy.com/media/69v5dFsLtzdpaFZz2N/200w.webp">
        </div>
                <div class="img-warpper">
          <img class="lazyload" data-original="https://media0.giphy.com/media/69v5dFsLtzdpaFZz2N/200w.webp">
        </div>
                <div class="img-warpper">
          <img class="lazyload" data-original="https://media0.giphy.com/media/69v5dFsLtzdpaFZz2N/200w.webp">
        </div>
                <div class="img-warpper">
          <img class="lazyload" data-original="https://media0.giphy.com/media/69v5dFsLtzdpaFZz2N/200w.webp">
        </div>
        <script type="text/javascript">
            // 图片懒加载类
                    class LazyLoad {
                      constructor(el) {
                        this.imglist = Array.from(document.querySelectorAll(el)); // 需使用懒加载的图片集合
                        this.init(); // 初始化
                      }
                      // 判断是否该图片是否可以加载
                      canILoad() {
                        let imglist = this.imglist;
                        for (let i = imglist.length; i--;) {
                          // 缩写，相当于if true
                          this.getBound(imglist[i]) && this.loadImage(imglist[i], i);
                        }
                      }
                      // 获取图片与窗口的信息
                      getBound(el) {
                        let bound = el.getBoundingClientRect();
                        let clientHeight = window.innerHeight;
                        console.log('bound', bound)
                        // 图片距离顶部的距离 <= 浏览器可视化的高度，从而推算出是否需要加载
                        return bound.top <= clientHeight - 100; // -100是为了看到效果，您也可以去掉
                      }
                      // 加载图片
                      loadImage(el, index) {
                        // 获取之前设置好的data-original值
                        let src = el.getAttribute('data-original');
                        // 赋值到src，从而请求资源
                        el.src = src;
                        // 避免重复判断，已经确定加载的图片应当从imglist移除
                        this.imglist.splice(index, 1);
                      }
                      // 当浏览器滚动的时候，继续判断
                      bindEvent() {
                        window.addEventListener('scroll', () => {
                          this.imglist.length && this.canILoad();
                        });
                      }
                      // 初始化
                      init() {
                        this.canILoad();
                        this.bindEvent();
                      }
                     }
                    // 实例化对象，参数则是需要使用懒加载的图片类名,s
                    const lazy = new LazyLoad('.lazyload');
//                    console.log('666', {a:1}.toString().call({}))
        </script>
    </body>
</html>
js图片懒加载

推荐阅读
