前端实现图片懒加载

Posted 2020-11-05 倚笑乘风

项目中经常会遇到多图片需要加载的情况，如果一次性全部加载完耗时较多，也较慢。这时就需要用到图片懒加载，常用的有jqueryLazyload这个插件。下载地址：https://github.com/helijun/helijun/blob/master/plugin/lazyLoad/jquery.lazyload.js

使用时，首先得引入jquery，然后再引入jqueryLazyload这个插件，原理就是先不给img加src路径，然后把路径加在属性节点data-original上，在满足条件需要加载的时候再把data-original上的路径添加到src上。用法如下：

<!-- 引入图片列表 -->
  <section class="module-section" id="container">
      <img class="lazy-load" data-original="./images/1.jpg" width="640" height="480" alt="测试懒加载图片"/>
      <img class="lazy-load" data-original="./images/2.jpg" width="640" height="480" alt="测试懒加载图片"/>
      <img class="lazy-load" data-original="./images/3.jpg" width="640" height="480" alt="测试懒加载图片"/>
      <img class="lazy-load" data-original="./images/4.jpg" width="640" height="480" alt="测试懒加载图片"/>
      <img class="lazy-load" data-original="./images/5.jpg" width="640" height="480" alt="测试懒加载图片"/>
      <img class="lazy-load" data-original="./images/6.jpg" width="640" height="480" alt="测试懒加载图片"/>
      <img class="lazy-load" data-original="./images/7.jpg" width="640" height="480" alt="测试懒加载图片"/>
      <img class="lazy-load" data-original="./images/8.jpg" width="640" height="480" alt="测试懒加载图片"/>
      <img class="lazy-load" data-original="./images/9.jpg" width="640" height="480" alt="测试懒加载图片"/>
      <img class="lazy-load" data-original="./images/4.jpg" width="640" height="480" alt="测试懒加载图片"/>
  </section>

然后在js里使用：

    $(document).ready(function() {     
        $("img.lazy-load").lazyload({ 
          placeholder : "./images/bg.png",
　　　 effect : "fadeIn", //渐现，show(直接显示),fadeIn(淡入),slideDown(下拉)
　　　//threshold : 380, //预加载，在图片距离屏幕180px时提前载入
         //event: ‘click‘,
　　　//container: $("#container"), // 指定对某容器中的图片实现效果
　　　　}); 
  　});