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

原创 朱雀 2021-04-28 02:39 129672阅读 2赞


完整jQuery图片延迟加载插件jQuery.lazyload下载（百度网盘）
链接：https://pan.baidu.com/s/1NxOCha95bUqbj7attwUXsA
提取码：rp6r
首先引入所需的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中如何调用
定义标签img标签 图片路径引用方法用data-original

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

然后使用js初始化lazyload并设置图片显示方式

  1. <script type="text/javascript" charset="utf-8">
  2.   $(function() {
  3.       $("img.dandelioncloud").lazyload({effect: "fadeIn"});
  4.   });
  5. </script>
文章版权声明：注明蒲公英云原创文章，转载或复制请以超链接形式并注明出处。

发表评论

表情：
评论列表 （有 0 条评论，129672人围观）

还没有评论，来说两句吧...

相关阅读

    相关 jquery延迟加载图片的方法分享

    在网上经常会看到一些很长的网页会延迟加载其中的图片，我认为这是一种按需分配的做法，网页只为那些想继续浏览网页的人加载后面的图片，在不影响用户体验的前提下，使用jquery延迟加

    向右看齐向右看齐/ 0 赞/ 1056 阅读

    相关 jQuery延迟加载（懒加载）

    简介 延迟加载（lazy load）又可称之为懒加载，他是为了避免一些无谓的性能开销而提出来的。所谓延迟加载，就是当真正需要数据的时候，才真正执行数据加载操作。可简单理解为

    喜欢ヅ旅行喜欢ヅ旅行/ 0 赞/ 1137 阅读