使用lazyframe延迟加载第三方资源

2024-02-05 阅读：423 分类：前端标签：工具

第三方资源通常用于展示广告或视频，以及与社交媒体集成。默认方法是在网页加载后立即加载第三方资源，但这可能会使网页加载速度减慢。如果第三方内容不重要，可以通过延迟加载来降低此性能成本。

插件直通车：https://gitee.com/YuJian11/lazyframe

网站在嵌套iframe 使用youtube或者其他平台视频的时候，会加载很慢，我们可以使用上面的插件实现延迟加载

1、首先，引入插件

2、使用

<script>
  lazyframe('.lazyframe');
</script>

3、完整案例demo

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Lazyframe Demo</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lazyframe/dist/lazyframe.css">
 <style>
  .container {
   max-width: 500px;
   margin: 0 auto;
   width: 100%;
  }

  p {
   font-family: "Helvetica Neue", Helvetica, Arial;
  }

  .lazyframe {
   margin-bottom: 200px;
  }

  .lazyframe--custom {
   background: #bada55;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   text-align: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
  }

  .lazyframe--custom .lazyframe__title {
   position: relative;
   width: 100%;
   display: block;
   font-size: 32px;
   font-family: Arial;
   color: #fff;
  }
  .lazyframe--custom::before {
   width: auto;
  }
 </style>
</head>
<body>
 <div class="container">
  <p>Youtube video with thumbnail and title from API</p>
  <div class="lazyframe" data-src="https://www.youtube.com/embed/ara1uUvajoU" data-vendor="youtube"></div>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/lazyframe/dist/lazyframe.min.js"></script>
 <script>
  lazyframe('.lazyframe');
 </script>
</body>
</html>