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

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

我已经看到了用 Vanilla JavaScript和jQuery直接访问DOM编写的youtube视频的延迟加载解决方案，但是我想知道是否有更好的“反应方式”吗？

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

最佳答案

只需添加一个单行代码，并将其延迟加载六个视频
而不是拥有src = {value}的属性，而拥有srcdoc = {``}
该技巧源于 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可能会受到伤害。

关于javascript - 在React中延迟加载嵌入式YouTube视频，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49205747/