[转载]图片延迟加载 优化jquery.lazyload.js - 李豫川 - 博客园

[转载]图片延迟加载 优化jquery.lazyload.js – 李豫川 – 博客园.

由于用户访问页面需要加载很多的图片,延迟加载技术在电子商务网站领域越来越普及,淘宝商城,京东商城,凡客等访问量巨大的电子商务站点为了增加用户用户 体验,访问速度以及减少对自身服务器的压力,纷纷研发或使用延迟加载技术。当然如果没有前端开发的深入研究很难写出自己的js特效包。

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="http://www.wumeiwang.com/js/lazyload/jquery.js"></script>
<script type="text/JavaScript" src="http://www.wumeiwang.com/js

/jquery.lazyload.js”></script>

复制代码
<script type=text/javascript src=http://pic.imtimmy.com/wp-content/js/lazyload/jquery.lazyload.js></script>
<script type=text/javascript>
jQuery(document).ready(
function($){
$(
img).lazyload({
placeholder : 
http://www.wumeiwang.com/images/common/grey.gif,
effect      : 
fadeIn
});
});
</script>
复制代码

 

但是如果使用httpwatch等网页测试工具检测页面加载你会发现,图片其实是全部加载完了。因为执行js是在页面的page_load之后。所 有,jquery.lazyload.js加载出来的只是图片的缓存文件。这样不就2次访问服务器加载图片了?即使jquery.lazyload.js 加载的只是缓存图片…

解决办法:在jquery.lazyload.js的62行将 $(self).attr(“original”, $(self).attr(“img”));  修改成 $(self).attr(“original”, $(self).attr(“original”));   然后读图图片的时候将img=  替换成    original=即可。凡客,淘宝商城都是这样的作法。这样才实现真正意义上的延迟加载。

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏