jQuery图片延迟加载插件jquery.lazyload

jQuery图片延迟加载插件jquery.lazyload
LazyLoad 是一款可以延迟加载网页图片的jQuery插件,它可以延迟加载图片,使用它图片在浏览器可视区域外是不会被加载的, 直到进入可视区域才进行加载。这与图片预加载的处理方式正好是相反的,LazyLoad通过减少请求可以加快页面加载速度,这样能更好的提升网站的体验也可以在某些情况下减少服务器请求负担。

入门指南

引入jquery和jquery.lazyload.js依赖

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.lazyload.min.js"></script>

在图片标签中加入属性值

为图片加入样式lazy 图片路径引用方法用data-original

<div class="container text-center">
    <img class="lazy" src="img/thumbnail.png" data-original="img/1.jpg">
    <img class="lazy" src="img/thumbnail.png" data-original="img/2.jpg">
    <img class="lazy" src="img/thumbnail.png" data-original="img/3.jpg">
    <img class="lazy" src="img/thumbnail.png" data-original="img/4.jpg">
    <img class="lazy" src="img/thumbnail.png" data-original="img/5.jpg">
    <img class="lazy" src="img/thumbnail.png" data-original="img/6.jpg">
</div>

使用jQuery初始化lazyload并设置图片载入特效

<script type="text/javascript">
  $(function() {
      $("img").lazyload({effect: "fadeIn"});
  });
</script>

the end