Question

我有一个包含3个（可能会在未来更多）嵌入YouTube视频的页面。我听说延迟加载这些组件是一种很好的方法，可以减少顶部的HTTP请求数量，减少不必要的内容下载并加快页面加载速度。

我见过使用vanilla JavaScript和jQuery直接访问DOM的youtube视频的延迟加载解决方案，但我想知道是否有更好的'React方式'来做它？

任何反馈都将不胜感激！

Answer 1

只需添加单行代码并将其懒加载到六个视频中

使用srcdoc = {``}

而不是src = {value}的属性

该技巧源于 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可能会受伤。

在React

1 个答案: