jquery插件图片延迟加载问题

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

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



 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值