jQuery lazyLoad.js插件 是一款基于jquery框架,可以“实现”图片延迟加载的插件。请注意,我用了双引号,因为从我自己实际调试的结论来说呢,并不会延迟加载,而是先下载,然后通过改变<img>的src属性来隐藏原来的图片。
我们先来看看他的代码吧!
<script type="text/javascript" src="/static/jssrc/lazyload.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#team_main_side img").lazyload({
placeholder : "/static/theme/xituan/img/img_loading.gif",
effect : "fadeIn"
});
});
</script>
工作原理是先在<img>下创建original属性,并把src属性值赋值给original,然后再把src的值修改成你设置的 placeholder的值。当滚动条到达图片位置时,再把original的属性赋值给src。这个时候向服务器发出一个HTTP请求,确认下有没有修 改,服务器返回一个304状态,等于本来一遍HTTP请求能完成的工作,它用了2遍,非但没有减少开支,还增加开销,我彻底无语了。(如下图,火狐的firebug显示)
[img]
[/img]
假如你使用过这个插件的话,你有没有发现,无论多大的图片,只要你的滚动条到达那个位置的话,图片就会很快的显示出来,有点不可思议吧。那是因为那张图片已经下载好了。
再者,我自己的想法,jquery的代码是在页面加载完成后才会执行的,那页面加载完的时候,图片较小的都下载完了,再执行jq代码的话,那种意义就不存在了。
那有问题肯定要解决,把这个插件的代码改一改。
好吧,开始了
打开这个jquery.lazyLoad.js,找到如下图第一个红框的代码,直接注释掉;第二个红框是需要自己手工添加上去的,然后保存。
[img]
[/img]
在页面插入图片的代码如<img src="http://lzlee.com/upload/201010122047211034.jpg" alt=""/>修改成<img original="http://lzlee.com/upload/201010122047211034.jpg" src="http://lzlee.com/img/img_loading.gif" alt=""/>
最后记得插入js代码
<script type="text/javascript" src="/js/jquery.js"></script><!--jquery 包-->
<script type="text/javascript" src="/js/jquery.lazyload.js"></script><!--lazyload 插件-->
<script type="text/javascript"> //初始化代码
$(document).ready(function(){
$("#team_main_side img").lazyload({
placeholder : "http://lzlee.com/img/img_loading.gif",
effect : "fadeIn"
});
});
</script>
这样所有图片就都显示img_loading.gif了,由于都是请求的同一个图片,浏览器只会请求一次..对于减少服务器http请求来说,我们的目标已经达到了.当浏览器滚动到图片的位置时候,就会把图片加载进来。
- 大小: 90.6 KB
- 大小: 55.8 KB
分享到:
相关推荐
JQuery LazyLoad 图片懒加载实例,相关描述可查看我的博文“JQuery.LazyLoad 实现图片懒加载”
jquery.lazyload图片预加载 调用简单 内有实例
JQuery Lazyload加载图片实例
使用jquery 进行图片延迟加载,区别于jquery插件的lazyload。按需加载。
你必须修改 HTML 代码. 在 src 属性中设置展位符图片, demo 页面使用 1x1 像素灰色 GIF 图片.... 这里可以定义特定的 class 以获得需要延迟加载的图片对象. 通过这种方法你可以简单地控制插件绑定.
LazyLoad 图片延迟加载效果示例 LazyLoad 图片延迟加载效果示例,这是由cloudgamer编写的一个封装插件,用它可以完成不少的效果,现在这个是图片延迟效果,也就是说,我们需要显示的图片会先加载,暂时用不上的也就...
jquery.lazyload 实现图片延迟加载,ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面
jquery.lazyload.js 图片懒加载 --demo
jquery图片加载延时,针对网站图片节省流量使用
Lazyload图片延迟加载效果
Lazyload图片延迟加载效果,很值得去学习的案例!
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多...
从网上下载来的版本多多少少都...没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下。
jquery.lazyload.min.js插件 直接下载引入即可~~~~~~~
应用lazyload.js 插件实现图片懒加载
JQuery LazyLoad 图片懒加载实例,
jQuery_lazyload插件示例Demo
使用jQuery.Lazyload的优点 提高页面加载速度。 网页图片挨个渐显,非常美观。
jquery Lazyload插件,用于页面的图片延迟加载等