详细信息
lwcLazyLoader.js 是一个基于 jQuery 的小型延迟加载器，通过延迟加载文档中的图像和背景图像来提高页面性能。
如何使用它：
1. 在 jQuery 之后插入缩小版的 jQuery lwcLazyLoader.js 插件。
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/lwcLazyLoader.min.js"></script>2. 初始化插件，我们准备好了。
$('html').lwcLazyLoad({
// selector REQUIRED
selector: '.lazy-load'
});3. 将 CSS 类添加lazy-load到图像或容器元素，并在data-lazyload属性中指定图像/背景路径。对于延迟加载背景图像，请确保将 设置data-lazyload-css为 TRUE。
<section class="lazy-load"
data-lazyload="bg.jpg"
data-lazyload-css="true">
Lazy Load Bacground Image
</section>
<img class="lazy-load"
data-lazyload="sample.jpg"
>4. 覆盖默认data属性。
$('html').lwcLazyLoad({
dataSelector: 'data-lazyload',
dataLoadedSelector: 'data-lazyloaded',
dataCSSSelector: 'data-lazyload-css',
});5. 将在元素加载和加载时触发的回调函数。
$('html').lwcLazyLoad({
onElementLoad: function(el) {
// ...code
},
onElementLoaded: function(el) {
// ...code
}
});
发表评论
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。