`

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代码


分享到:
评论

相关推荐

    jquery lazyload延时加载

    jquery图片加载延时,针对网站图片节省流量使用

    jquery lazyload图片延迟加载技术

    使用jquery 进行图片延迟加载,区别于jquery插件的lazyload。按需加载。

    图片延迟加载特效,jquery.lazyload.js

    你必须修改 HTML 代码. 在 src 属性中设置展位符图片, demo 页面使用 1x1 像素灰色 GIF 图片.... 这里可以定义特定的 class 以获得需要延迟加载的图片对象. 通过这种方法你可以简单地控制插件绑定.

    jquery lazyload延迟加载技术的实现原理分析

    懒加载技术(简称lazyload)并不是新技术,它是js程序员对网页性能优化的一种方案。lazyload的核心是按需加载。在大型网站中都有lazyload的身影,例如谷歌的图片搜索页,迅雷首页,淘宝网,QQ空间等。因此掌握lazyload...

    图片延迟加载 lazyload

    图片延迟加载,可以增加用户体验,jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度。在某些情况下,它也能帮助减轻服务器负载。

    jquery.lazyload 实现图片延迟加载

    jquery.lazyload 实现图片延迟加载,ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面

    jQuery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多...

    图片延迟加载显示代码Jquery.LazyLoad.js改良版

    从网上下载来的版本多多少少都...没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下。

    jQuery图片延迟加载插件jQuery.lazyload

    jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度。在某些情况下,它也能帮助减轻服务器负载。演示地址http://www.jq22.com/jquery-info390

    jquery Lazyload

    jquery Lazyload插件,用于页面的图片延迟加载等

    详解jQuery lazyload 懒加载

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多...

    JQuery 图片延迟加载 lazyload

    JQuery 图片延迟加载 lazyload

    jquery.lazyload.js

    网络图片延时加载,网络延时加载。jquery.lazyload.js

    延迟加载图片jquery.lazyload.js

    延迟加载图片jquery.lazyload.js 延迟加载图片jquery.lazyload.js

    动态加载的图片LazyLoad

    用于显示动态加载的图片如何通过JQuery.LazyLoad控件实现延迟加载,可惜目前例子在谷歌浏览器下还有些问题

    jquery 延迟加载JS jquery.lazyload.js

    修改jquery.lazyload.js实现页面延迟载入

    jQuery lazyload 的重复加载错误以及修复方法

    jQuery lazyload是一款延迟加载图片的的插件,原意是按需加载,当图片出现在可视区域时进行加载,但是官方的插件经过firebug的检测可知,并不能节省流量开支,反而有重复加载的现象。

    jquery_lazyload

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.

Global site tag (gtag.js) - Google Analytics