首页 孤独与我正文

利用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"});

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

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

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

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

评论

最新留言

  • 东

    东 说:

    很好的网站

    2020-03-29 01:02:59
    来源:福利帖:查车牌常用的网站
  • 东

    东 说:

    jhhj

    2020-03-29 01:02:32
    来源:福利帖:查车牌常用的网站
  • 学习乐园

    学习乐园 说:

    进步之星

    2020-03-29 00:05:45
    来源:福利帖:查车牌常用的网站
  • 付攀

    付攀 说:

    刘禅

    2020-03-28 23:12:18
    来源:福利汇总:也许是最全的TG福利频道分享页了
  • 4646

    4646 说:

    太强大了

    2020-03-28 16:43:49
    来源:福利帖:查车牌常用的网站
  • tg真的牛逼

    tg真的牛逼 说:

    楼主牛逼啊

    2020-03-28 07:51:17
    来源:福利汇总:也许是最全的TG福利频道分享页了
  • Nino

    Nino 说:

    哦啦哦啦

    2020-03-28 03:45:40
    来源:福利汇总:也许是最全的TG福利频道分享页了
  • 彭于晏第一

    彭于晏第一 说:

    看看

    2020-03-27 00:00:16
    来源:福利汇总:也许是最全的TG福利频道分享页了