彩票走势图

分块延迟加载的具体实现方法

转帖|其它|编辑：郝浩|2011-06-02 15:25:05.000|阅读 972 次

概述：本篇内容本来是想作为JS单元测试的Demo放出，但是看到不少朋友对分块延迟加载的具体实现感兴趣，我就在这里跟大家探讨一下，请多多提建议。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

简介：

　　本篇内容本来是想作为JS单元测试的Demo放出，但是看到不少朋友对分块延迟加载的具体实现感兴趣，我就在这里跟大家探讨一下，请多多提建议。

分析：

　　1、适用于页面可以将图片划分区块，如无名良品彩票走势图的各个楼层。

　　2、多个区块，并且区块的粒度适中，每个最好在半屏到2屏之间。

　　3、更适合于每个区块上有导航的情形，因为会导航到中间区块，上面下面的区块都不加载图片。

实现：

　　1、 更改页面img 元素，将<img src=”图片地址”/> 更改为：<img data-ks-lazyload=” 图片地址” />,其中 data-ks-lazyload 为自定义属性，自己可以指定属性名。

　　2、初始化：

　　1）遍历区块内所有图片，包含 data-ks-lazyload 属性的图片放入数组，添加默认的占位图片（Loading图片）<img data-ks-lazyload=” 图片地址”  src=”loading 图片”/>。

　　2） 判断当前区块是否在用户视图内，如果在用户视图内则加载所有图片，不在用户视图内，则添加窗口Scroll事件和窗口Resize事件。

　　3、加载图片

　　1） 当用户视图移动到当前区块时，如果注册了事件则加载图片，加载完移除事件。

　　2） 加载区块图片时，将图片改为<img src=”图片地址”/>，在ie6,ie7下修正图片大小。

　　4、  Demo

总结：

　　Demo中的代码比较简单大部分是Kissy中 datalazyload.js中的，其中重写了判断是否在当前视图内，和加载区块图片的函数，当用户停留在具体某区块超过5秒后可以加载其他区块，这个实现没写在代码中，感兴趣的可以自己实现一下。下面还有一遍博客，是针对分块延迟加载JS做的单元测试，共同学习，共同讨论


标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn

文章转载自：网络转载

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP