DataLazyload¶
数据延迟加载组件.
很多时候, 用户在第一屏就发生了跳转, 大量”未曾露面”的图片下载对用户来说是无意义的.
DataLazyload 可以 “揣测” 用户的行为, 当用户想看某个区域时, 才开始下载这个区域的图片.
除了延迟图片下载, DataLazyload 还可以延迟某个区域的所有 html 的渲染, 这对 Tabs 等 UI 组件很有裨益, 能提高整个页面的性能.
Class¶
Config Attributes¶
Methods¶
Class Detail¶
- class datalazyload.DataLazyload¶
- DataLazyload (containers[, config])
Parameters: - containers (String|HTMLElement|Array<HTMLElement>) – 默认为 document.body , 图片所在容器(可以多个)
- config (Object) – 配置项, 详细见下方 Config Attributes Detail .
Config Attributes Detail¶
- datalazyload.mod¶
{String} - 默认是 ‘manul’,懒处理模式.
- ‘auto’ : 自动化. html 输出时, 不对 img.src 做任何处理
- ‘manual’ : 输出 html 时, 已经将需要延迟加载的图片的 src 属性替换为 ‘data-ks-lazyload’
Note
- 对于 textarea 数据, 只有手动模式;
- 当使用 ‘manual’ 模式时, 对 img 元素使用 data-ks-lazyload 后, 如果这个 img 元素或其父级元素为隐藏状态, 此时, datalazyload 无法起作用, 因为隐藏状态下的 img 的 offset.top 计算永远为 0, 永远处于 datalazyload 阈值之内, 这种情况下, 直接使用 textarea 更靠谱.
- datalazyload.diff¶
{Number} - 当前视窗往下, diff px 外的 img/textarea 延迟加载, 适当设置此值, 可以让用户在拖动时感觉数据已经加载好, 默认为当前视窗高度(两屏以外的才延迟加载).
- datalazyload.placeholder¶
{String} - 默认为 null , 图像的占位图.
- datalazyload.execScript¶
{Boolean} - 默认为 true , 是否执行 textarea 里面的脚本.
Properties Detail¶
- datalazyload.containers¶
{Array} - 可读写, 图片所在容器(可以多个), 默认为 document.body
- datalazyload.config¶
{Object} - 可读写 ,配置参数
- datalazyload.images¶
{Array<String>} - 可读写 ,需要延迟下载的图片列表
- datalazyload.areaes¶
{Array<String>} - 可读写 ,需要延迟处理的 textarea列表
- datalazyload.callbacks¶
{Object} - 可读写 ,和延迟项绑定的回调函数, 元素列表和函数列表一一对应
- datalazyload.threshold¶
{Number} - 可读写 , 需要开始延迟的 Y 坐标值
Methods Detail¶
- datalazyload.addCallback()¶
- addCallback (el, fn)添加回调函数. 当 el 即将出现在视图中时, 触发 fn
- datalazyload.loadCustomLazyData()¶
- static loadCustomLazyData (containers, type)加载自定义延迟数据
Parameters: - containers (HTMLElement|Array<HTMLElement>) – 包含自定义延迟加载项的容器元素
- type (String) – 延迟加载方式, 可取:
- textarea 或 area-data , 即表示延迟加载使用的是 textarea 方式;
- img 或 img-src, 即表示延迟加载使用的是 img 方式.