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

26天前   阅读:114   分类:前端    标签: 工具

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

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

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

1、首先,引入插件

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lazyframe/dist/lazyframe.css">

<script src="https://cdn.jsdelivr.net/npm/lazyframe/dist/lazyframe.min.js"></script>

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>
【腾讯云】年度爆款2核2G4M云服务器118元/年,新老用户同享

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://tpxhm.com/fdetail/1036.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×