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

约定不等于承诺〃 2024-03-16 11:56 387阅读 0赞

首先引入所需的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() {
  4.       $("img.dandelioncloud").lazyload({
  5.     effect: "fadeIn"});
  6.   });
  7. </script>

发表评论

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

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

相关阅读

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

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

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

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

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

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