带有 jQuery 和 IntersectionObserver 的图像和 Iframe 延迟加载器 - lazyload.js

版本:

浏览量:1099

最后更新：2021-09-12

应用标签：git MAC 软件 Jquery插件

推荐指数:

查看演示点击下载

详细信息

这是tuupola延迟加载插件的升级版，可以让你使用Intersection Observer API智能延迟加载图片、背景图片和iframes（例如Youtube/Vimeo视频）。

如何使用它：

1.lazyload.min.js在jQuery库之后下载并包含脚本。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"
        crossorigin="anonymous">
</script>
<script src="lazyload.js"></script>

2. 使用该data-src属性将图像和 iframe 内容嵌入到页面中。

<img data-src="1.jpg" class="lazy">
 
<iframe data-src="https://www.youtube.com/embed/WOQC8ETeTVM" class="lazy" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

3. 该插件还支持使用该属性的响应式图像传递data-srcset。

<img data-src="1.jpg"
     data-srcset="small.png 200w,
                  full.png 400w"
     class="lazy">

4. 初始化插件并完成。

$('.lazy').lazyload();

5. 启用/禁用交叉模式。

$('.lazy').lazyload({
  allowIntersectionMode: true
});

6. 自定义占位符图像。

$('.lazy').lazyload({
  placeholder     : "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
});

7. 延迟加载功能的更多有用设置。

$('.lazy').lazyload({
 
  // lazy load once the user has scrolled beyond a certain threshold
  threshold       : 0,
 
  // failure limit
  failure_limit   : 0,
 
  // trigger event
  event           : 'scroll',
 
  // where to track the trigger event
  container       : window,
 
  // skip invisible elements
  skip_invisible  : false,
   
  // x/y offsets
  pageXOffset: false,
  pageYOffset: false
   
});

联系我们