用于图像和背景的简单延迟加载器 - lwcLazyLoader.js

用于图像和背景的简单延迟加载器 - lwcLazyLoader.js

版本:

浏览量:197

最后更新:2021-09-12

应用标签:MAC 软件Jquery插件

推荐指数:

详细信息

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
  }
   
});

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。