利用jquery.lazyload实现图片延迟加载

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

<script type="text/javascript" src="/js/jquery.lazyload.js"></script>

<script type="text/javascript">

jQuery(document).ready(

function($){

$("img").lazyload({

   placeholder : /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= 即可。凡客,淘宝商城都是这样的作法。这样才实现真正意义上的延迟加载。

最新评论:

no.10103 njyo8zgf2 188.143.232.32 2016-06-08 12:28

It's always a pleasure to hear from someone with exirtepse.

no.4580 2312323 113.247.190.247 2016-01-06 18:18

的飞飞

no.4444 1667088467 183.37.228.8 2015-01-21 16:03

no.4270 123 14.23.121.114 2014-07-30 17:59

11

no.4269 123 14.23.121.114 2014-07-30 17:59

11

no.4182 217074239 60.194.14.248 2014-04-23 18:09

二逼

no.4181 217074239 60.194.14.248 2014-04-23 18:09

二逼

no.4180 1667088467 124.207.197.194 2014-04-23 18:06

no.4179 1667088467 124.207.197.194 2014-04-23 18:06

no.4178 1667088467 124.207.197.194 2014-04-23 18:06

no.4177 1667088467 124.207.197.194 2014-04-23 18:06

no.4176 1667088467 124.207.197.194 2014-04-23 18:06

no.4175 1667088467 124.207.197.194 2014-04-23 18:06

no.4174 1667088467 124.207.197.194 2014-04-23 18:06

no.4173 1667088467 124.207.197.194 2014-04-23 18:06

no.4172 1667088467 124.207.197.194 2014-04-23 18:06

no.4171 1667088467 124.207.197.194 2014-04-23 18:06

no.4170 1667088467 124.207.197.194 2014-04-23 18:06

no.4169 1667088467 124.207.197.194 2014-04-23 18:06

no.4168 1667088467 124.207.197.194 2014-04-23 18:06

no.4167 1667088467 124.207.197.194 2014-04-23 18:06

no.4166 1667088467 124.207.197.194 2014-04-23 18:06

no.4165 1667088467 124.207.197.194 2014-04-23 18:06

no.4164 1667088467 124.207.197.194 2014-04-23 18:06

no.4163 1667088467 124.207.197.194 2014-04-23 18:06

no.4162 1667088467 124.207.197.194 2014-04-23 18:06

no.4161 1667088467 124.207.197.194 2014-04-23 18:06

no.4160 1667088467 124.207.197.194 2014-04-23 18:06

no.4159 1667088467 124.207.197.194 2014-04-23 18:06

no.4158 1667088467 124.207.197.194 2014-04-23 18:06

no.4157 1667088467 124.207.197.194 2014-04-23 18:06

no.4156 1667088467 124.207.197.194 2014-04-23 18:06

no.4155 1667088467 124.207.197.194 2014-04-23 18:06

no.4154 1667088467 124.207.197.194 2014-04-23 18:06

no.4153 1667088467 124.207.197.194 2014-04-23 18:06

no.4152 1667088467 124.207.197.194 2014-04-23 18:06

no.4151 1667088467 124.207.197.194 2014-04-23 18:06

no.4150 1667088467 124.207.197.194 2014-04-23 18:06

no.4149 1667088467 124.207.197.194 2014-04-23 18:06

no.4148 1667088467 124.207.197.194 2014-04-23 18:06

no.4147 1667088467 124.207.197.194 2014-04-23 18:06

no.4146 1667088467 124.207.197.194 2014-04-23 18:06

no.4145 1667088467 124.207.197.194 2014-04-23 18:06

no.4144 1667088467 124.207.197.194 2014-04-23 18:06

no.4143 1667088467 124.207.197.194 2014-04-23 18:06

no.4142 1667088467 124.207.197.194 2014-04-23 18:06

no.4141 1667088467 124.207.197.194 2014-04-23 18:06

no.4140 1667088467 124.207.197.194 2014-04-23 18:06

no.4139 1667088467 124.207.197.194 2014-04-23 18:06

no.4138 1667088467 124.207.197.194 2014-04-23 18:06

发表评论:

邮箱: