首页 > 图片特效 / 站长常用 / jquery特效插件 / > jQuery图片延迟加载的插件LazyLoad

jQuery图片延迟加载的插件LazyLoad

点击: 5161 , 发布日期: 2011-8-19
 jQuery图片延迟加载的插件LazyLoad

jQuery图片延迟加载的插件LazyLoad

在浏览有些网站时,发现图片是在下拉滚动条时才加载,这是一个很不错的用户体验。这一效果是通过JavaScript 编写的 jQuery 插件实现的,它可以延迟加载长页面中的图片。 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置。 这与图片预加载的处理方式正好是相反的.在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态。 在某些情况下还可以帮助降低服务器负担。

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

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script> 

2、并且在你的执行代码中加入下面语句

$("img").lazyload(); 

这将使所有图片将被延迟加载.

设置敏感度

插件提供了 threshold 选项, 可以通过设置临界值 (触发加载处到图片的距离) 来控制图片的加载. 默认值为 0 (到达图片边界的时候加载).

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

将临界值定为 200, 当可视区域离图片还有 200 个象素的时候开始加载图片。

占位图片

你还可以设定一个占位图片并定义事件来触发加载动作. 这时需要为占位图片设定一个 URL 地址. 透明, 灰色和白色的 1x1 象素的图片已经包含在插件里面

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

使用特效

当图片完全加载的时候, 插件默认地使用 show() 方法来将图显示出来. 其实你可以使用任何你想用的特效来处理. 下面的代码使用 FadeIn 效果

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

 

关键词: jqury

注:用QQ登录后即可下载特效,当然你的积分是有限的,望好好利用与赚取!如何获得积分

我要评论
登录再评论
全部评论