用jQuery实现图片延迟加载的方法 Lazy Load

在浏览有些网站时,发现图片是在下拉滚动条时才加载,这不仅是一个很不错的用户体验,还可以加快网站的速度。很多大型网站都在用,好处还是蛮多的。现在很多WordPress主题已经自带了这功能,如果没有自带jQuery实现图片延迟加载可以看看这篇文章。

对于图片非常多的网站,载入网页还是需要比较长的时间,这个时候我们可以使用 Lazy Load 这个 jQuery 插件来延迟加载图片,让浏览者在下拉滚动条时才加载图片。

Lazy Loader 使用也非常简单,首先确保你的页面已经加载 jQuery Javascript 库,然后再加载 Lazy Load 的 Javascript 文件

首先下载lazyload,解压后上传放到主题目录中,然后在header.php模板文件标签前添加如下代码:

<script type="text/javascript" src="这里填写具体的存放路径/lazyload.js"></script>

然后在页面的 header 添加如下代码即可:

<script type="text/javascript"></script>
$(document).ready(function(){
$("img").lazyload({
placeholder : "/images/grey.gif",
effect : "fadeIn"
});
}
</script>

首先确保你的页面已经加载 jQuery Javascript 库 如果没有可以在header.php模板文件 head 部分添加:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

最后编辑于:2012/2/12作者: 游子

热爱一切美好的新事物,搞网站也被网站搞,剁手折腾。关注与学习Web相关技术与UI\UE\UED\UCD\Server相关知识,服务器运维、前端、后端、非专业程序猿、非高级前端后端攻城师!

暂无评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

arrow grin ! ? cool roll eek evil razz mrgreen smile oops lol mad twisted wink idea cry shock neutral sad ???