利用JQUERY.LAZYLOAD实现懒加载

什么是懒加载

当访问一个页面的时候,先把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
作者授权:除特别说明外,本文由 夏雨 原创编译并授权 夏雨博客 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

本文 暂无 评论

回复给

Top