现在淘宝,新浪等大网站,大量的图片都是在拉动滚动条的时候才加载,这样不但提高了用户体验,减少页面加载时间,同时也减少了不少htttp请求,减少了服务器的压力。
最近研究了下,发现是利用imagelazyload技术来实现图片的延迟加载,ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升。
从网上找了些资料,发现利用jquery的jquery.lazyload插件可以实现图片的延迟加载,所以就研究了翻,可是通过firefox的
firebug的检测,插件并不想象的那样,当拉动滚动条的时候图片才加载,而是页面加载时,所有图片都加载了,只是没有显示罢了,为了弄明白,特此下了
个jquery.lazyload来做个小实验。
下面是firebug检测结果
通过firebug我们发现,在页面加载的时候,所有图片都向服务器发出了请求,当拉动滚动条时,都又向服务器发出了请求,
这并不是我们想要的结果,不但没有减少服务器压力,反而增加了服务器请求。
上网查资料,通过一些网友的资料,终于弄懂了怎么回事,研究了下jquery.lazyload插件的源码。
jquery.lazyload
插件是通过将不需要加载的img的src值暂时存在original中,阻止img标签向服务器发送http请求,当需要加载的时候,再将
original中的保存的src值附回去。就像上面图中,一些图片向服务器中发送的请求,但没有成功。当加载页面时,img向服务器发送请求的同时
src值被改变,所以没有成功。
为了实现我们想要的目的,只有改一下jquery.lazyload插件了
先把蓝色背景的代码注掉
然后 在加上下面蓝色背景的代码
下面是html代码 将img的加个 original 把原来src的值给它,src可以给它个一个像素的小图片,防止加载的时候出现红色叉,也可以给它个gif动画
下面是javascript代码
分享到:
相关推荐
jquery图片加载延时,针对网站图片节省流量使用
使用jquery 进行图片延迟加载,区别于jquery插件的lazyload。按需加载。
你必须修改 HTML 代码. 在 src 属性中设置展位符图片, demo 页面使用 1x1 像素灰色 GIF 图片.... 这里可以定义特定的 class 以获得需要延迟加载的图片对象. 通过这种方法你可以简单地控制插件绑定.
懒加载技术(简称lazyload)并不是新技术,它是js程序员对网页性能优化的一种方案。lazyload的核心是按需加载。在大型网站中都有lazyload的身影,例如谷歌的图片搜索页,迅雷首页,淘宝网,QQ空间等。因此掌握lazyload...
图片延迟加载,可以增加用户体验,jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度。在某些情况下,它也能帮助减轻服务器负载。
jquery.lazyload 实现图片延迟加载,ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多...
从网上下载来的版本多多少少都...没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下。
jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度。在某些情况下,它也能帮助减轻服务器负载。演示地址http://www.jq22.com/jquery-info390
jquery Lazyload插件,用于页面的图片延迟加载等
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多...
JQuery 图片延迟加载 lazyload
网络图片延时加载,网络延时加载。jquery.lazyload.js
延迟加载图片jquery.lazyload.js 延迟加载图片jquery.lazyload.js
用于显示动态加载的图片如何通过JQuery.LazyLoad控件实现延迟加载,可惜目前例子在谷歌浏览器下还有些问题
修改jquery.lazyload.js实现页面延迟载入
jQuery lazyload是一款延迟加载图片的的插件,原意是按需加载,当图片出现在可视区域时进行加载,但是官方的插件经过firebug的检测可知,并不能节省流量开支,反而有重复加载的现象。
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.