我这里说的是淘宝移动端的实现:
我们用手机打开淘宝触屏版首页,页面是你看到多少就加载多少,从上到下滑动加载,默认不加载。
1:引用jq库:
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
2:开始引入我们真正用到的插件库(用于延时加载):
<script type="text/javascript" src="/js/jquery.delayed.js"></script>
3:初始化一些基本信息:
<script type="text/javascript">
var Img = "images/delayed.gif"; 图片加载前的默认图片,我实际应用在项目中是纯白色的图片。
jQuery.noConflict()(function(){
jQuery.noConflict()(".home9box img").delayed({placeholder:Img,effect:"fadeIn"}); 针对某个范围中的图片实现延时效果。
});
</script>
效果:
当浏览器滚动条距顶部为0的时候只加载第一页的内容,距离顶部不为0的时候才慢慢加载。