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

插件描述

jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度。在某些情况下,它也能帮助减轻服务器负载。

 

使用方法

引用jquery和jquery.lazyload.js到你的页面

  1. <script src=“jquery-1.11.0.min.js”></script>
  2. <script src=“jquery.lazyload.js?v=1.9.1”></script>

html图片调用方法

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

  1. <img class=“lazy” data-original=“img/bmw_m1_hood.jpg”>
  2. <img class=“lazy” data-original=“img/bmw_m1_side.jpg”>
  3. <img class=“lazy” data-original=“img/viper_1.jpg”>
  4. <img class=“lazy” data-original=“img/viper_corner.jpg”>
  5. <img class=“lazy” data-original=“img/bmw_m3_gt.jpg”>
  6. <img class=“lazy” data-original=“img/corvette_pitstop.jpg”>

js出始化lazyload并设置图片显示方式

  1. <script type=“text/javascript” charset=“utf-8”>
  2.   $(function() {
  3.       $(“img.lazy”).lazyload({effect: “fadeIn”});
  4.   });
  5. </script>

查看演示     下载代码

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据