您的位置:首页 > Web前端 > JQuery

jquery插件图片延迟加载问题

2011-07-14 10:57 211 查看
最近在开发项目的时候,由于页面需要加载很多的图片,我们就考虑到了用图片延迟加载来解决这个问题,也减小服务器的压力
jquery.lazyload.js就是一个基于jquery框架库的特效应用。它能让用户访问页面的时候,只加载当前屏幕所见内容的图片。
jquery.lazyload.js使用方法:首先页面需导入jquery.js。这个是先决条件,毕竟jquery.lazyload.js特效包是基于jquery框架库的!然后需到如Jquery.Lazyload.js。还需在本地服务器上传一张用来占位的图片grey.gif(可以是张很小的图片或者loading.gif之类表示正在加载的图片)。
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/jquery.lazyload.js"></script>

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

但是用firefox来测试这个效果的时候(之前还没有注意),它是第一次就将所有的图片都加载过来了,
因为执行js是在页面的page_load之后。所有,jquery.lazyload.js加载出来的只是图片的缓存文件。这样不就2次访问服务器加载图片了?即使jquery.lazyload.js加载的只是缓存图片
解决方案:
第一步:将你要加载页面中的所有<img>标签中的属性src修改为original
第二步:将jquery.lazyload.js中的第62行代码
$(self).attr("original", $(self).attr("src"));
修改为:
$(self).attr("original", $(self).attr("original"));
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: