jquery lazyload 延迟加载

      现在淘宝,新浪等大网站,大量的图片都是在拉动滚动条的时候才加载,这样不但提高了用户体验,减少页面加载时间,同时也减少了不少htttp请求,减少了服务器的压力。

     最近研究了下,发现是利用imagelazyload技术来实现图片的延迟加载,ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升。

    从网上找了些资料,发现利用jquery的jquery.lazyload插件可以实现图片的延迟加载,所以就研究了翻,可是通过firefox的 firebug的检测,插件并不想象的那样,当拉动滚动条的时候图片才加载,而是页面加载时,所有图片都加载了,只是没有显示罢了,为了弄明白,特此下了 个jquery.lazyload来做个小实验。

下面是firebug检测结果1365×331

通过firebug我们发现,在页面加载的时候,所有图片都向服务器发出了请求,当拉动滚动条时,都又向服务器发出了请求,

这并不是我们想要的结果,不但没有减少服务器压力,反而增加了服务器请求。

上网查资料,通过一些网友的资料,终于弄懂了怎么回事,研究了下jquery.lazyload插件的源码。

jquery.lazyload 插件是通过将不需要加载的img的src值暂时存在original中,阻止img标签向服务器发送http请求,当需要加载的时候,再将 original中的保存的src值附回去。就像上面图中,一些图片向服务器中发送的请求,但没有成功。当加载页面时,img向服务器发送请求的同时 src值被改变,所以没有成功。

为了实现我们想要的目的,只有改一下jquery.lazyload插件了

        先把蓝色背景的代码注掉

479×106

然后 在加上下面蓝色背景的代码

下面是html代码 将img的加个 original 把原来src的值给它,src可以给它个一个像素的小图片,防止加载的时候出现红色叉,也可以给它个gif动画

下面是javascript代码


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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值