转到首页 > 站长日志 > lazyload改造！真正的图片延迟加载效果
201109月29

lazyload改造！真正的图片延迟加载效果

站长日志 24 Comments 发表评论

前段时间一直在研究lazyload延迟加载图片效果，后来发现lazyload只是一个花哨的效果，并非真的实现了按需延迟加载，再加上搜索到的相关参考资料都基本雷同，所以就暂时放弃了研究。

今天有空，又来研究这个lazyload了，碰巧发现了相关的技术文档，经测试发现的确是实现了真正的延迟加载效果，所以研究一下，整理发布。

（如何测试是否是真正的延迟加载，请使用FireFox的FireBug插件进行测试）

以下文章是转载的，不是我的话：

动态加载本质上都是一样的，即： 图片或者数据一开始不会被加载，当你触发了滚动条（说明你想继续看这个网站）那么图片或者数据开始加载。 那么实现的方法其实有很多，但是基本上都是通过替换的方式来实现的。

滚动显屏加载

demo 您可以狠狠地点击这里：jQuery滚动加载图片

实现的代码：
<script language=”javascript” type=”text/javascript” src=”http://www.mmba.cc/templets/css/jquery.js”></script>
<script language=”javascript” type=”text/javascript” src=”http://www.mmba.cc/templets/css/jquery.scrollLoading.js”></script>

当然，不可能真的就如此简单，我们还需要做点小动作的。元素默认是不加载的，那么真正的加载地址显然要预先在元素上放置的，例如新浪微博默认把头像地址绑在了一个自定义的“dynamic-src”属性上。

在HTML5中，以data-开头的自定义属性都是合法的，且地址可以是图片，页面等。所以，我设定了绑定地址的自定义属性为“data-url”，此属性值设为真实的图片（或页面）地址就可以了。

对于常用的图片，还有一点小问题，就是其默认的src图片地址。其src地址不能是真实的图片地址（否则会直接一次性全部加载），也不能是空地址或是坏地址，否则IE浏览器下会出现很惊悚的红叉叉。

我的做法是默认链接的是一个1px * 1px的gif透明图片（大小很小），同时可以透出后面加载中gif动画图片，当滚动加载的时候直接把此gif图片替换掉。于是，对于图片，可能就有类似下面的代码：

<style type=”text/css”>
.zxx_test_list img { background:url(http://www.mmba.cc/templets/css/loading.gif) no-repeat center; }
</style>
<div>
<img src=”http://www.mmba.cc/templets/css/pixel.gif” data-url=”http://www.mmba.cc/templets/css/hd(4).jpg” width=”180″ height=”180″ />
</div>

scrollLoading是个很简单很小的插件（无注释YUI compressor min版仅508B），所以参数也很少，就一个，见下表：

参数 默认 释义
attr data-url 获取元素加载地址的属性名 

就这些了。此插件只适用于页面默认滚动条的动态加载。对于内部div之类的滚动加载不支持。

不懂的可以留言咨询！

文章作者：admin
本文地址：http://www.cookseo.com/372.html
版权所有：网站SEO-网站优化 © 转载时必须以链接形式注明作者和原始出处！

24 Responses to “lazyload改造！真正的图片延迟加载效果”

  1. #1 美录机械 回复 | 引用 Post:2011-11-14 17:51

    美录集团（http://www.chinameilu.com/）
    网站PR=2 交换友情链接。
    贵站可以链接请回复。
    QQ：273526613
    E-mail:24387481@qq.com 谢谢。

    • #2 admin 回复 | 引用 Post:2011-11-15 14:50

      不好意思，网站类型差异较大，暂不考虑。

  2. #3 boon 回复 | 引用 Post:2011-11-10 14:33

    给我个友情链接www.aijiyuan.com

  3. #5 王朋雨博客 回复 | 引用 Post:2011-11-05 11:04

    学习啦，主题很有趣

  4. #6 SEO优化 回复 | 引用 Post:2011-10-30 06:28

    哦！这个是Lazyload 延迟加载效果 的意思啊！学习了。

  5. #7 郑州门户 回复 | 引用 Post:2011-10-29 16:33

    今天我又来了 留个脚印 欢迎回访

  6. #8 SEO优化 回复 | 引用 Post:2011-10-29 07:51

    lazyload这个真不懂，太技术了吧！

  7. #10 石家庄seo 回复 | 引用 Post:2011-10-27 02:36

    小弟前来学习seo
    我的博客希望大家支持下http://www.seohl.com/

  8. #12 孟亚男 回复 | 引用 Post:2011-10-26 14:42

    不错,一直在寻找,不知道怎么运用到shopex里面,请老师指导..

  9. #13 boon 回复 | 引用 Post:2011-10-25 22:46

    天天也不见你上个QQ，结婚了幸福的找不着北了。告诉你，我在你北边，往我这瞅瞅

  10. #14 没看见 回复 | 引用 Post:2011-10-21 22:37

    域名,下载地址呢..修正版下载地址没看见

  11. #15 近视眼手术安全吗 回复 | 引用 Post:2011-10-07 17:06

    了解一下，谢谢分享

  12. #16 长沙调查公司 回复 | 引用 Post:2011-10-04 13:48

    呵呵，支持支持吧

  13. #17 子南 回复 | 引用 Post:2011-10-03 09:50

    这个工具还是有点用，以前没用过呢

  14. #18 玻璃钢盖板 回复 | 引用 Post:2011-10-01 00:01

    这也是个精细活儿啊，注重质量必定需注重细节！

  15. #19 网站排名 回复 | 引用 Post:2011-09-30 22:03

    ……..区别？

  16. #20 网站排名 回复 | 引用 Post:2011-09-30 21:47

    不错，继续加油哦

  17. #21 haibor 回复 | 引用 Post:2011-09-30 14:13

    不懂！
    和原版的jquery.lazyload.js有啥区别呢？！

    • #22 admin 回复 | 引用 Post:2011-10-09 11:22

      原版的只是视觉上的延迟，这个改造后，是实质性的延迟。

      • #23 胡尐睿丶 回复 | 引用 Post:2011-10-15 11:54

        jquery.lazyload不仅仅是视觉上的延迟，而且还加载了2次，简直就是坑爹货

发表评论

分类:

最新文章

最新评论