javascript - 在 React 中延迟加载嵌入的 YouTube 视频

Question

我有一个包含 3 个(将来可能更多)嵌入 youtube 视频的页面。我听说延迟加载这些组件是减少顶部 HTTP 请求数量、减少不必要下载的内容并加快页面加载的好方法。

我已经看到用 vanilla JavaScript 和 jQuery 编写的 youtube 视频的延迟加载解决方案直接访问 DOM，但我想知道是否有更好的“ react 方式”来做到这一点？

对于任何反馈，我们都表示感谢!

Answer 1

只需添加一个单行代码以及六个视频的延迟加载
而不是具有 src={value} 的属性，而是具有 srcdoc={``}
诀窍 Root 于 srcdoc ，您可以将 HTML 文档的全部内容放在属性中的功能。这就像内联样式，但内联整个文档之类的东西。

{["sh0EGUheef8", "1H72tRzG5TU", "cbBB-unybLA", "lv-YIJC1xWo", "PBwslCZRnaU", "w2zQ4lMFoMg"].map((value, index) => (
          <div key={index}>
            <iframe
              title="Youtube"
              aria-hidden="true"
              className={classes.iframe}
              frameBorder="0"
              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
              allowFullScreen
              webkitallowfullscreen="true"
              mozallowfullscreen="true"
              srcDoc={`<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/${value}/?autoplay=1><img src=https://img.youtube.com/vi/${value}/hqdefault.jpg alt='Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition'><span>▶</span></a>`}
            ></iframe>
          </div>

唯一的问题是框架。用户将不得不再次单击它。
由于第一次点击只是加载视频。它仍然可以保存否则会被下载的垃圾，特别是对于移动设备，那些 500KB 可能会受到伤害。