zoukankan      html  css  js  c++  java
  • 编写代码实现图片懒加载

    <!DOCTYPE html>
      <html>
        <head>
          <title>图片的懒加载</title>
          <style>
          * {
            margin: 0;
            padding: 0;
           }
          .container {
            margin:0 auto;
             800px;
          }
          .imgBox {
            height: 430px;
            margin-bottom: 20px;
            overflow: hidden;
            background-color: #eee;
          }
          .imgBox img {
            display: none;
             100%;
          }
         </style>
        </head>
        <body>
          <div class="container">
            <!-- <div class="imgBox"><img src="" alt="" data-img="./images/111.jpg"></div> -->
          </div>
          <script src="node_modules/jquery/dist/jquery.min.js"></script>
          <script src="DelayImg.js"></script>
        </body>
      </html>
    --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
     
    let $container = $('.container'),
      $imgBoxs = null,
        $window = $(window);

    // => 造点假数据 new Array(20).fill(null) 创建长度为20的数组,每项用 null 填充
    let str = ``;
    new Array(20).fill(null).forEach(item => {
      str += `<div class="imgBox"><img src="" alt="" data-img="./images/111.jpg"></div>`;
    });
    $container.html(str);
    $imgBoxs = $container.children('.imgBox');

    // => 多张图片延迟加载
    $window.on('load scroll', function () {
      // => $B 获取浏览器底边框距离 body 的距离
      let $B = $window.outerHeight() + $window.scrollTop();
      // => 循环每一个图片区域,根据自己区域距离 body 的距离,计算出里面的图片是否加载
      $imgBoxs.each((index, item) => {
        let $item = $(item);
        $itemA = $item.outerHeight() + $item.offset().top,
        isLoad = $item.attr('isLoad');
        if ($itemA <= $B && isLoad !== 'true') {
          $item.attr('isLoad', true);
          // => 加载当前区域中的图片
          let $img = $item.children('img');
          $img.attr('src', $img.attr('data-img'));
          $img.on('load', () => $img.stop().fadeIn());
        }
      });
    })



  • 相关阅读:
    110、抽象基类为什么不能创建对象?
    109、什么情况会自动生成默认构造函数?
    108、如果想将某个类用作基类,为什么该类必须定义而非声明?
    107、类如何实现只能静态分配和只能动态分配
    106、C++中的指针参数传递和引用参数传递有什么区别?底层原理你知道吗?
    hdoj--2036--改革春风吹满地(数学几何)
    nyoj--46--最少乘法次数(数学+技巧)
    vijos--P1211--生日日数(纯模拟)
    nyoj--42--一笔画问题(并查集)
    nyoj--49--开心的小明(背包)
  • 原文地址:https://www.cnblogs.com/HYTing/p/12615964.html
Copyright © 2011-2022 走看看