您的位置:首页 > 运维架构 > 网站架构

延时加载技术-----仿照手机淘宝网站图片延时加载

2015-05-28 12:41 344 查看
我这里说的是淘宝移动端的实现:

我们用手机打开淘宝触屏版首页,页面是你看到多少就加载多少,从上到下滑动加载,默认不加载。

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的时候才慢慢加载。

资源下载http://download.csdn.net/detail/qianqianyixiao1/8747743
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: