为你的网站部署jQuery.lazyload插件实现图片延迟加载

2017-10-25 17:29 来自本站原创 20,810 16 4
[摘要]

jQuery.lazyload是一款实现图片延迟加载的jQuery插件,无论从视觉效果还是在性能上都会在一定程度上提高网页的加载速度,本文讲解网页部署方法。

大家在浏览网页的时候有没有发现有的站点页面刷新后,图片处会先显示一张默认图(如logo图等)之后随着页面的滚动,开始一张张加载图片。这其实就是图片延迟加载效果,又称之为“图片懒加载”。

为你的网站部署jQuery.lazyload插件实现图片延迟加载

图片懒加载原理:先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储再img标签的自定义属性中(比如data-src)。当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果。

为你的网站部署jQuery.lazyload插件实现图片延迟加载

这样做的好处就是,能防止页面一次性向服务器响应大量请求导致服务器响应慢,页面卡顿或崩溃等问题。特别适用于图片角度的页面,页面加速效果非常明显。

这里飞鸟给大家推荐一款优秀的jQuery插件来实现图片延迟加载效果--jQuery.lazyload.js,只需要进行简单的部署,就可以轻松让站点实现图片延迟加载效果,特别适用于网站首页等有图片列表的页面。

首先需要将插件引用在页面,如果你的站点已经引用jQuery插件,这只需音入jQuery.lazyload.min.js

<script src="jquery-1.8.3.min.js"></script>
<script src="jquery.lazyload.min.js"></script>

之后修改你的html结构,给img标签增加“lazy”样式(可自定义),设置src地址为默认图片地址,而真实的图片需采用data-original引用,如下结构

<img class="lazy" src="default-img.jpg" data-original="img/true-img.jpg" >

注意,如果你的默认图片与实际图片大小不一,则需要设置该img图片的width和height,以免页面加载变形。

之后配置jQuery,

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

如果你给img标签自定义的样式不是lazy,则js中的选择器需要修改(js基础知识,不赘述)

另外还有其他参数可供选择

$("img.lazy").lazyload({
 placeholder : "default-img.kpg", //用图片提前占位
 // placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
 effect: "fadeIn", // 载入使用何种效果
 // effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
 threshold: 200, // 提前开始加载
 // threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
 event: 'click', // 事件触发时才加载
 // event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
 container: $("#container"), // 对某容器中的图片实现效果
 // container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
 failurelimit : 10 // 图片排序混乱时
 // failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
});

其中placeholder参数是指,在你的html结构中并没有直接指定src=""路径时,可以通过js动态添加。即html结构中有占位图片则不需配置该参数,反之可以配置。

完成这些,我们就实现了对页面的图片懒加载部署了。

对于是否真能提高页面性能,飞鸟做了一个小测试,通过F12开发者工具的Network监控,我们看到:页面刷新之初确实没有请求懒加载的图片,而当页面滚到到图片所在位置,页面开始向服务器请求图片。

理论上还是对页面优化有一定作用的,且在视觉效果上也比较个性,非常推荐各位站长朋友使用。

lazyload插件下载地址:

点击下载  提取码:96lv

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助微信扫一扫赞助

  • 支付宝扫一扫赞助
  • 微信扫一扫赞助
  • 声明:凡注明“本站原创”的所有文字图片等资料,版权均属 雅兮网 所有,欢迎转载,但务请注明出处;
    目前评论:16   其中:访客  12   博主  4
    加载中...
    1. Van 1
      6个月前 (05-30) 10楼

      学习了,回头加上试试

    2. 1年前 (2017-11-14) 9楼

      博主是个技术达人,谢谢博主的分享

    3. 1年前 (2017-11-13) 8楼

      图片多肯定影响加载打开页面的速度,优化一下还是很有必要的,尤其是国外服务器,能起到一定的作用。

    4. 1年前 (2017-11-04) 7楼

      正准备找一点参考看看

    5. 1年前 (2017-10-27) 6楼

      看起来不错,我的图片较多,考虑试用一下这个插件

    6. 1年前 (2017-10-26) 5楼

      这个功能蛮好的,不过确实会给别人一张网站很慢的错觉

      • 飞鸟
        1年前 (2017-10-27)  地下1层

        @闲鱼: 可能是占位图片给人的感觉,需要将展位图片调整一下,可能这种错觉会好很多。

    7. 1年前 (2017-10-26) 4楼

      JS用多了会对客户端的浏览器造成很大的压力的,如果对方用了国内全家桶那样的安全软件的话,就是个灾难!

      • 飞鸟
        1年前 (2017-10-26)  地下1层

        @明月登楼的博客: 也没有那么夸张,现在的电脑配置带几个JS特效还是很轻松的;何况,WordPress最流行的Begin 主题光jQuery插件都不下十几个,还不是依然丝滑~~~

        • 1年前 (2017-10-29)  地下2层

          @飞鸟: 我基本上都关闭ajax效果了!评论/图片/文章这些我都是关闭的!就是不喜欢这个延迟加载的视觉效果!给人感觉就是卡,可能这个跟浏览用户群体有关系吧!

    8. 1年前 (2017-10-26) 板凳

      一直接受不了延迟加载的图片展示效果,总感觉是网站卡顿!

    9. 1年前 (2017-10-25) 椅子

      我觉得图片可以用云存储,应该会快一点

    10. 1年前 (2017-10-25) 沙发

      方法看起来还是比较简单的,有空再折腾试试

      • 1年前 (2017-11-07)  地下1层

        @懿古今: 今天想折腾的时候,才发现文中竟然没有jquery.lazyload.min.js的下载地址,这个有点不够人性和啊

        • 飞鸟
          1年前 (2017-11-07)  地下2层

          @懿古今: 哦,哈哈,确实忘记了,刚刚已经在文中增加了下载地址

    发表评论

    疑问 调皮 难过 抠鼻 吓 微笑 可爱 坏笑 惊讶 发呆 疑问 大兵 偷笑 咒骂 发怒 白眼 鼓掌 得意 擦汗 亲亲 大哭 呲牙 晕 强

    16 4 20,810
    Top