A Lazyload library based on jQuery
npm install @autofe/lazyload支持图片懒加载,对于非图片内容,可以通过 onAppear 回调函数来自己处理加载逻辑.
首先你需要修改你的 HTML , 配置 data-src 来指定实际显示的图片. 另外, 要求指定图片的尺寸.
``html`


然后通过脚本初始化
`javascript`
$('img.lazy').lazyload();
`html`


`javascript`
$('img.lazy').lazyload({
attr: 'data-src2'
});
还可以配置函数
`javascript`
$('img.lazy').lazyload({
attr: function () {
return $(this).attr('data-src2');
}
});
`html` width="100" height="75"
data-src="demo.jpg"
data-srcset="demo.jpg 100w, demo_2x.jpg 200w"
sizes="100px">
`javascript`
$('img.lazy').lazyload();
当然, 你可以可以自定义 srcset 来源:
`javascript`
$('img.lazy').lazyload({
srcsetAttr: 'data-srcset2'
});
或者
`javascript`
$('img.lazy').lazyload({
srcsetAttr: function () {
return $(this).attr('data-srcset2');
}
});
` 当你不想要滚动懒加载时, 你可以直接指定一个延迟时间来加载图片, 比如 1000 毫秒后加载所有图片. 参数可以通过 data attributes 或者 JavaScript 两种方式来配置. Name | Type | Default | Description 初始化, 可以接受参数进行配置. > 使用 $(el).lazyload(options) 方式创建的监听是 无法 手动(主动)去销毁监听的;(为了不影响 jQuery 的链式调用准则) 1. 必须使用 如在 Tab 形式的异步列表,在切换 Tab 时可能需要销毁之前的监听,否则会造成严重的性能问题。 Thanks to Bootstrap and tuupola/jquery_lazyloadhtml
``javascript`
$('.box').lazyload({
onAppear: function () {
$(this).html('Loaded').addClass('active');
}
});`$3
javascript`
$('.lazy').lazyload({
delay: 1000
});windowOptions
---- | ---- | ------- | -----------
container | object | | 滚动容器, 默认是 window , 仅支持原生 Dom 对象做为参数.'both'
threshold | number | 0 | 偏移值, 用户判断 DOM 是否满足条件.
direction | string | vertical | 方向, 用于判断 DOM 是否满足条件. 可配置 (位于viewport内), 'vertical'(仅考虑垂直方向), 'horizontal'(仅考虑水平方向), 'above'(位于viewport及上方即可).src
skipInvisible | boolean | false | 是否忽略不可见 DOM . 不建议修改此项配置
failureLimit | number | 0 | 懒加载内部有一个依赖图片顺序的性能优化机制, 如果你的图片顺序是错乱的, 你可以适当调大该数值.
delay | number | -1 | 延迟加载时间, 单位毫秒, 当 delay >= 0 时, 会在 delay 时长后立即加载所有图片.
attr | string or function | data-src | 配置图片的 来源srcset
srcsetAttr | string or function | data-srcset | 配置图片的 来源attr
removeAttr | boolean | true | 当图片加载完毕后,去掉 和 srcsetAttr 配置的属性src
onAppear | function | null | 当 DOM 满足条件时, 触发该回调函数, 仅触发一次.
onLoad | function | null | 仅针对图片, 当图片加载成功时触发该回调函数.
onError | function | null | 仅针对图片, 当图片加载失败时触发该回调函数.
placeholder | string | 一张 base64 透明图 | 仅针对图片, 占位图, 当没有默认 属性时, 会设置这个图片.`Methods
$3
javascript`
$('img.lazy').lazyload({
threshold: 100
});let lazyDestroyDemo = new AutoFE.Lazyload(el, options)$3
来创建实例, el 可以是 jQuery 对象 / DOM 对象 / CSS 选择器(内部实现还是依赖 jQuery) lazyDestroyDemo.unbind()
2. 当需要主动去销毁该实例的监听时,通过调用 来销毁 lazyDestroyDemo = null`
3. 必要时销毁实例 End