首页 > 其他 > 详细

前端实现图片懒加载

时间:2018-05-16 12:16:38      阅读:160      评论:0      收藏:0      [点我收藏+]

项目中经常会遇到多图片需要加载的情况,如果一次性全部加载完耗时较多,也较慢。这时就需要用到图片懒加载,常用的有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"), // 指定对某容器中的图片实现效果
    }); 
   });

前端实现图片懒加载

原文:https://www.cnblogs.com/dxzg/p/9045027.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!