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

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

版本:

浏览量:1129

最后更新:2021-09-12

应用标签:gitMAC 软件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
   
});
联系我们
付费复制 免费复制 付费复制
付费后30天内不限量复制

价格:元

支付宝支付
联系客服
扫一扫,支付¥

正在加载二维码...

支付完成后,请等待10秒左右,请勿关闭此页

发表评论

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