首页 孤独与我正文

利用JQUERY.LAZYLOAD实现懒加载

欢迎话痨加入本站QQ群994819852

什么是懒加载

当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次,俗称占位图),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。这就是图片懒加载。

怎么实现懒加载

这里我们利用Jquery里的LAZYLOAD插件来实现懒加载

使用方法

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

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

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://apps.bdimg.com/libs/jquery-lazyload/1.9.5/jquery.lazyload.js"></script>

html图片调用方法

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

<img class="lazy" data-original="img/bmw_m1_hood.jpg">
<img class="lazy" data-original="img/bmw_m1_side.jpg">
<img class="lazy" data-original="img/viper_1.jpg">
<img class="lazy" data-original="img/viper_corner.jpg">
<img class="lazy" data-original="img/bmw_m3_gt.jpg">
<img class="lazy" data-original="img/corvette_pitstop.jpg">

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

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

在图片中也可以不使用 class="lazy",初始化时使用:

$("img").lazyload({effect: "fadeIn"});

这样就可以对全局的图片都有效!

文章标题:利用JQUERY.LAZYLOAD实现懒加载

本页链接:https://www.xiayu.wang/gdyw/lyjquery.lazyloadsxljz.html

版权声明:除非特别标注,否则均为本站原创文章,转载时请以链接形式注明文章出处。

评论

©️ 2020 夏雨博客 Sitemap | 网站地图 | 蜀ICP备17011287号-1