图片延迟加载技术（ImageLazyLoad）

14-02-08 15:59 22483 0 技术

ImageLazyLoad 技术，就是在下拉滚动条的时候加载图片，这种比较适合一个网页上有很多图片的情况，例如某个页面都是图片，那么如果用户访问的时候，会在加载完整个页面等待很长时间，而用第一眼看到的只是第一屏的内容，所以第二屏、第三屏等的内容加载时间其实是在浪费时间！如果用户只看了第一屏，而不翻屏就关掉了浏览器，那么第二屏第三屏下载的资源也是一中流量的浪费！ 并且加载用户体验也不好！那么这就有了这个小技巧，使用 JavaScript 来实现图片缓冲，只加载用户要看的屏幕的资源，这个小技巧的好处是提高访问速度，提高用户体验，对 SEO 没有什么帮助！不废话，说做法：

一、使用 jQuery 插件，插件名: jquery.lazyload（7kb大小），压缩后（3kb大小）：

  1. 导入JS插件，请自行到 jQuery 官方下载 js 文件

    <script src="http://jianzi0307.blog.163.com/blog/jquery.js" type="text/javascript"></script>
<script src="http://jianzi0307.blog.163.com/blog/jquery.lazyload.js" type="text/javascript"></script>

  2. 在你的页面中加入如下的 JavaScript：

    $("img").lazyload();

    这将会使所有的图片都延迟加载。

当然插件还有几个配置项可供设置：

  1. 改变 threshold

    $('img').lazyload({ threshold : 200 });

    把阀值设置成 200 意思就是当图片没有看到之前先 load 200 像素。

  2. 当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件

    $("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});

  3. 可以通过定义 effect 参数来定义一些图片显示效果

    $("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
});

    LazyLoad（延迟加载）技术不仅仅用在对网页中图片的延迟加载，对数据同样可以，Google Reader 和 Bing 图片搜索就把 LazyLoad 技术运用的淋漓尽致；

缺陷： 1. 与 Ajax 技术的冲突； 2. 图片的延迟加载，遇到高度特别高的图片，会出现停止加载的问题； 3. 写代码不规范的同学要注意了，不管由于什么原因，如果您的页面中，img 标签的 height 属性未定义，那么我建议您最好不要使用 ImageLazyLoad。

二、使用淘宝的延迟加载技术：(2kb 大小) http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/imglazyload-min.js调用方法也是很简单的：

<script src="http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/imglazyload-min.js" type="text/javascript"></script> 
<script type="text/javascript">
// <![CDATA[KISSY.ImageLazyload();//]]>
</script>

注：该脚本依赖 yahoo-dom-event, 页面中需要加载 yui 2.x,你也可以直接引用下面的地址:

<script src="http://kissy.googlecode.com/svn/trunk/third-party/yui2/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script>

配置参数如下：

<script type="text/javascript">
KISSY.ImageLazyload({
    mod: "manual", // 延迟模式。默认为 auto
    diff: 200 // 当前屏幕下多远处的图片开始延迟加载。默认两屏外的图片才延迟加载
});
</script>

manual 模式时，需要手动将页面中需要延迟加载的图片的 src 属性名更改为 data-lazyload-src。比如 SRP 页面，宝贝列表的后20个图片延迟加载。 输出时，html 代码为： <img data-lazy-src="http://www.xxx.com/path/to/img" alt="something" /> 如果您是 jQuery，Prototype 等这些 JS 框架的粉丝，他们都有定制的 LazyLoad Plugin 提供：http://www.appelsiini.net/projects/lazyload

LazyLoad（延迟加载）技术不仅仅用在对网页中图片的延迟加载，对数据同样可以。

共 0 条评论

我要评论

请登录后发表评论 点击登录

文章归档

2024 年 10 月 2 2024 年 09 月 2 2024 年 07 月 1 2024 年 06 月 1 2024 年 04 月 1 2024 年 03 月 1 2024 年 01 月 2 2023 年 11 月 2 2023 年 10 月 1 2023 年 08 月 1

文章日历

2024 年 11 月
日 一 二 三 四 五 六
26 27 28 29 30 01 02
03 04 05 06 07 08 09
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

文章标签

最新评论

友情链接