jquery 图片预加载，先模糊后清晰

jquery 图片预加载，先模糊后清晰

转载：http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/?

Lazy Load?是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.

在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担.

?

Lazy Load 灵感来自 Matt Mlinac 制作的?YUI ImageLoader?工具箱. 这是演示页面.

怎样使用?

Lazy Load 依赖于?jQuery. 请将下列代码加入页面?head?区域:

1
2

1
设置敏感度
插件提供了?threshold?选项, 可以通过设置临界值 (触发加载处到图片的距离) 来控制图片的加载. 默认值为 0 (到达图片边界的时候加载).
1
1
1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
1
2
3
4
5
6
7
8
9
$(function() {
$("img:below-the-fold").lazyload({
placeholder : "img/grey.gif", 
event : "sporty" 
});
});
$(window).bind("load", function() { 
var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000);
});
下载插件