利用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.46319 aly1 204.12.219.162 2019-01-19 23:16

Hello there, My name is Aly and I would like to know if you would have any interest to have your website here at luocheng.cn promoted as a resource on our blog alychidesign.com ? We are in the midst of updating our broken link resources to include current and up to date resources for our readers. Our resource links are manually approved allowing us to mark a link as a do-follow link as well . If you may be interested please in being included as a resource on our blog, please let me know

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

发表评论:

邮箱: