当前位置: 代码迷 >> JavaScript >> jquery.lazyload.js兑现图片延迟加载 滚动加载
  详细解决方案

jquery.lazyload.js兑现图片延迟加载 滚动加载

热度:603   发布时间:2012-10-23 12:12:22.0
jquery.lazyload.js实现图片延迟加载 滚动加载

?

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

???在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担.

????官方演示地 址

? jquery.lazyload.js使用方法:首先页面需导入jquery.js。这个是先决条件,毕竟jquery.lazyload.js特效包是基于jquery框架库的!然后需到如Jquery.Lazyload.js。还需在本地服务器上传一张用来占位的图片grey.gif(可以是张很小的图片或者loading.gif之类表示正在加载的图片)

<script?type="text/javascript"?src="/js/lazyload/jquery.js"></script>
<script?type="text/javascript"?src="/js
/jquery.lazyload.js"></script>

?

< script?type = " text/javascript " >
jQuery(document).ready(
function ($){
$(
" img " ).lazyload({
?????placeholder?:?
grey.gif ,
?????effect??????:?
" fadeIn "
});
});
< / script>

? 但是如果使用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=即可。凡客,淘宝商城都是这样的作法。这样才实现真正意义上的延迟加载。

  相关解决方案