jQuery滚屏加载

原帖地址http://blog.sina.com.cn/s/blog_654db8f90100yzgq.html

前两次探索了一下lazyload.js这个东东，试用期间感觉很不错，使用也方便，没想到有两处很坑爹，第一，假延迟；第二，火狐不好使。于是再网上各种找，发现了scrollLoading，虽然使用有点麻烦，但是真的做到了延迟加载。最后分享此人的链接给大家http://www.zhangxinxu.com/wordpress/?p=1259

下面说一下我怎么实现的。

第一步，引入js:

<script type="text/javascript" src="${base}/web/js/detail/js/jquery_002.js"></script>
<script type="text/javascript" src="${base}/web/js/detail/js/jquery.scrollLoading.js" ></script>
<script type="text/javascript" src="${base}/web/js/jquery-1.4.1.min.js"></script>

 

第二步，写触发事件

<script>
$(function() {
 $(".scrollLoading").scrollLoading(); 
});
</script>

 

第三步，对需要延迟加载的图片进行处理，记住是每一张都要处理

<img class="scrollLoading"  style="background: url(&quot;/web/img/detail/loading.gif&quot;) no-repeat scroll center center transparent;vertical-align:text-top;" src="/web/img/detail/loading.gif" style="WIDTH: 15px; HEIGHT: 15px" data-url="${staticCtx}/web/img/detail/ico3.jpg"/>

重点：（1）img要加class="scrollLoading"  （2）真实的图片路径一定要写在data-url里面 （3）src可写可不写，在实际的页面中，所有的图片大小可能不太一样，用同样的图片，可能出现的效果，有时会不太好看，所以可以适当去掉src,这点自己决定