学步园

最近在开发项目的时候,由于页面需要加载很多的图片,我们就考虑到了用图片延迟加载来解决这个问题,也减小服务器的压力

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"));