DataLazyload

数据延迟加载组件.
很多时候, 用户在第一屏就发生了跳转, 大量”未曾露面”的图片下载对用户来说是无意义的.
DataLazyload 可以 “揣测” 用户的行为, 当用户想看某个区域时, 才开始下载这个区域的图片.
除了延迟图片下载, DataLazyload 还可以延迟某个区域的所有 html 的渲染, 这对 Tabs 等 UI 组件很有裨益, 能提高整个页面的性能.

Config Attributes

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) – 延迟加载方式, 可取:
  1. textareaarea-data , 即表示延迟加载使用的是 textarea 方式;
  2. imgimg-src, 即表示延迟加载使用的是 img 方式.