经常在一些网站上见到图片都是在窗口上将要出现的时候才进行服务器请求,才进行显示。当时就想这样岂不是能在图片较多或图片较大的页面上有效的减少服务器请求和网络流量么,后来才发现原来这个就是方法叫做图片延迟加载。
现在有一个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 延迟加载图片jquery.lazyload.js
你必须修改 HTML 代码. 在 src 属性中设置展位符图片, demo 页面使用 1x1 像素灰色 GIF 图片.... 这里可以定义特定的 class 以获得需要延迟加载的图片对象. 通过这种方法你可以简单地控制插件绑定.
jquery.lazyload.min.js插件 直接下载引入即可~~~~~~~
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多...
使用jQuery.Lazyload的优点 提高页面加载速度。 网页图片挨个渐显,非常美观。
修改jquery.lazyload.js实现页面延迟载入
jquery.lazyload.js 图片懒加载 --demo
从网上下载来的版本多多少少都...没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下。
大家应该听说过图片延迟加载技术吧。就是网站首页有较多图片的时候,一次性加载完要好久,有了这个东西,用户看到的地方才加载,提升打开速度,提高用户体验,本人整理出来实现一键傻瓜操作,让不懂的添加代码的人也...
jquery.lazyload图片预加载 调用简单 内有实例
个人把常用的一些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...
Jquery.lazyload.min 轻量级懒加载Jquery框架。
没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下。 解决思路大致是两点,一是...
主要介绍了Jquery图片延迟加载插件jquery.lazyload.js的使用方法,需要的朋友可以参考下