经常在一些网站上见到图片都是在窗口上将要出现的时候才进行服务器请求,才进行显示。当时就想这样岂不是能在图片较多或图片较大的页面上有效的减少服务器请求和网络流量么,后来才发现原来这个就是方法叫做图片延迟加载。
现在有一个jquery的插件叫做“jquery.lazyload.js”,专门进行图片延迟加载处理,处理方法如下:
1
2
3
4
5
6
7
8
9
10
|
<script type= "text/javascript" src= "jquery.lazyload.js" ></script>
<script type= "text/javascript" >
jQuery(document).ready( function ($){
$( "img" ).lazyload({
placeholder : 'loading.gif' ,
effect : "fadeIn"
}); }); </script> |
但是似乎jquery.lazyload.js有bug,但是如果使用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=即可。凡客,淘宝商城都是这样的作法。这样才实现真正意义上的延迟加载。
2012-09-19,实现jquery.sd.lazyload.js插件 |
在参考了“jquery.lazyload.js“之后我开发了一个简化的图片延迟加载的插件,工作原理:
-
在新建文档是将文档中的img标签中src都替换为_src,这样做的目的是显示页面是不加载图片。
-
在页面上调用jquery.sd.lazyload.js插件,给每个图片绑定一个滚动事件,如果在滚动条的显示范围之内就将图片的src属性更新上_src的值,将图片实现出来,同时如果图片已经显示了就不再次显示。
-
在编辑文档是为了能在编辑区正常显示图片,需要将img标签的_src属性都改为src。
注意,1,3步骤都需要在服务器端完成,现在本站就是这样显示的。
相关推荐
jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度。在某些情况下,它也能帮助减轻服务器负载。演示地址http://www.jq22.com/jquery-info390
jQuery.Lazyload.js是一个高效实用的JavaScript插件,它能够显著提升网页加载速度,同时赋予网页图片渐显效果,从而创造出既美观又高效的网页浏览体验。 jQuery.Lazyload.js的核心原理在于"懒加载"(Lazy Loading)...
你必须修改 HTML 代码. 在 src 属性中设置展位符图片, demo 页面使用 1x1 像素灰色 GIF 图片.... 这里可以定义特定的 class 以获得需要延迟加载的图片对象. 通过这种方法你可以简单地控制插件绑定.
jquery.lazyload.min.js插件 直接下载引入即可~~~~~~~
### 延迟加载图片技术详解:利用jquery.lazyload.js实现高效页面加载 #### 技术背景 在互联网时代,网站或应用中的图片资源占据了大量的数据传输量,尤其是在移动网络环境下,图片的加载速度直接影响了用户体验及...
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多...
**jQuery LazyLoad.js 图片懒加载技术详解及Demo演示** 在网页设计中,图片加载是一项重要的性能优化策略。尤其对于内容丰富的网站,一次性加载所有图片可能会导致页面加载速度变慢,影响用户体验。为了解决这个...
jQuery LazyLoad 是一个jQuery插件,它的主要功能是在用户滚动页面到图片所在位置时才开始加载图片,而不是在页面初始加载时就一次性加载所有图片。这种方式大大减少了首次加载页面时的数据量,提高了页面的加载速度...
修改jquery.lazyload.js实现页面延迟载入
**jQuery LazyLoad 插件详解:实现图片延迟加载** 在网页设计中,为了提升用户体验,减少页面初次加载的时间,一种常见的优化策略是采用图片延迟加载(Image Lazy Load)技术。`jQuery LazyLoad` 是一个非常实用的 ...
从网上下载来的版本多多少少都...没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下。
大家应该听说过图片延迟加载技术吧。就是网站首页有较多图片的时候,一次性加载完要好久,有了这个东西,用户看到的地方才加载,提升打开速度,提高用户体验,本人整理出来实现一键傻瓜操作,让不懂的添加代码的人也...
jQuery Lazyload插件通过监听滚动事件,判断图片是否进入视口,如果进入则加载图片,通常还会结合CSS进行优化,比如初始时设置图片为透明或占位符,加载完成后再显示真实图片。 在实际应用中,使用jQuery Lazyload...
在JavaScript领域,jQuery库提供了一个优秀的懒加载插件——jQuery LazyLoad.js,它能够有效地提高页面性能,降低服务器压力。 **一、jQuery LazyLoad.js 插件原理** jQuery LazyLoad.js 的核心思想是只加载视口内...
个人把常用的一些jquery插件做了一个demo,里面有jquery.dropkick-1.0.0.js、slider.js、fullcalendar-1.5.2、jquery.grumble.js、jcarousellite_1.0.1.js(已修改)、jquery.jqzoom.js、jquery.thickbox.js、jquery...