利用jQuery.lazyload.js文件实现图片延迟加载

投稿   雅兮网  2017-11-13 07:25:35  115 人阅读  28 条评论

投放广告联系   诚邀合作伙伴   赞助我们   垃圾评论惩罚

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

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

利用jQuery.lazyload.js文件实现图片延迟加载 建站经验 第1张

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

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

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

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

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

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

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

之后配置 jQuery,

  1. $(function() {
  2. $("img.lazy").lazyload({
  3. effect: "fadeIn"
  4. });
  5. });

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

经过 boke112导航测试,以上代码可以直接添加到 jquery.lazyload.min.js 文件最后即可。

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

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

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

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

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

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

如果文章对你有帮助,请赞赏支持作者继续创作!

历史上的今天:

文章标签: ,   ,   ,  
原文地址:http://www.iyaxi.com/2017-10-25/1604.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 雅兮网 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
淘宝天猫无门槛专享优惠券

 发表评论


  1. 乐漫TV
    乐漫TV 【小白】 @回复

    厉害啊 [哈哈]

  2. 历史趣谈
    历史趣谈 【秀才】 @回复

    博主厉害了,技术太牛了 [鼓掌] [给力]

  3. 姜辰
    姜辰 【进士】 @回复

    弄个插件~233

  4. 电烤箱什么牌子好
    电烤箱什么牌子好 【状元】 @回复

    我的网站好像是有这个功能的、

  5. 米扑博客
    米扑博客 【书童】 @回复

    博主厉害了,技术太牛了 [太开心]

  6. 明月登楼
    明月登楼 【王爷】 @回复

    过来露个脸,睡觉了!明天还得上班,熬不下去了!

  7. 小萝博客
    小萝博客 【状元】 @回复

    这个只对图片站方便点

  8. 沈唁志
    沈唁志 【秀才】 @回复

    图片少 还能接受

  9. 雅兮网
    雅兮网 【尚书】 @回复

    原来没人喜欢[哈哈]

  10. 橘子书
    橘子书 【丞相】 @回复

    懒人加载,我都关闭了。 [偷笑] 就怕给人加载太慢。

  11. 姜哥说
    姜哥说 【状元】 @回复

    这样不好吧,反而增加内存量

  12. 明月登楼
    明月登楼 【王爷】 @回复

    这个还是有点儿接受不了呀!虽然JS代码使用的是客户端的资源,但是这个延迟载入特效感觉还是太花哨了!

  13. 万正远洋
    万正远洋 【小白】 @回复

    这个图片加载方式,我用了一天就给取消掉了!

  14. 灵异世界网
    灵异世界网 【进士】 @回复

    不跟主流,只要速度可以就好。

  15. 一伍一拾
    一伍一拾 【举人】 @回复

    感谢分享,学习了!

  16. 小白seo博客
    小白seo博客 【秀才】 @回复

    我网站很少有图片 [挖鼻屎] [挖鼻屎] [挖鼻屎] [挖鼻屎] [挖鼻屎] [挖鼻屎]

  17. 我爱动感单车网
    我爱动感单车网 【尚书】 @回复

    个人不是很喜欢这个效果,所以我的博客一直没使用。

  18. 辩论吧
    辩论吧 【尚书】 @回复

    延迟加载是个不错的方法

  19. 心动
    心动 【进士】 @回复

    这个功能早早的就在用了~很方便!

  20. 品牌馆
    品牌馆 【举人】 @回复

    这个功能还是很实用的

  21. 阿财博客
    阿财博客 【举人】 @回复

    这种想法不错,有空我也试一试

  22. 靠谱学生兼职网
    靠谱学生兼职网 【尚书】 @回复

    这种优化技术不错。

  23. 里维斯社
    里维斯社 【进士】 @回复

    我能想到优化图片的事,就是压缩,简单方便 [哈哈]

  24. 99八十一
    99八十一 【进士】 @回复

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

    • 懿古今
      懿古今【村长】2017-11-13 08:47  回复

      @99八十一是的,有些优化还是有必要,不过还是要根据自己的站点实际情况来定才行