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

Question

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

我见过用普通 JavaScript 和 jQuery 直接访问 DOM 编写的 YouTube 视频的延迟加载解决方案，但我想知道是否有更好的“React 方式”来做到这一点？

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

Answer 1

只需要添加一行代码 and its lazy loaded for six videos

\n

不要使用 src={value} 属性，而是使用 srcdoc={``}

\n

这个技巧源于srcdoc，您可以将 HTML 文档的全部内容放入属性中。它\xe2\x80\x99 类似于内联样式，但是内联整个文档之类的东西。

\n

{["sh0EGUheef8", "1H72tRzG5TU", "cbBB-unybLA", "lv-YIJC1xWo", "PBwslCZRnaU", "w2zQ4lMFoMg"].map((value, index) => (\n          <div key={index}>\n            <iframe\n              title="Youtube"\n              aria-hidden="true"\n              className={classes.iframe}\n              frameBorder="0"\n              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"\n              allowFullScreen\n              webkitallowfullscreen="true"\n              mozallowfullscreen="true"\n              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? \xe2\x80\x93 Wisecrack Edition'><span>\xe2\x96\xb6</span></a>`}\n            ></iframe>\n          </div>\n

\n

唯一的问题是框架。用户必须再次单击它。\n因为第一次单击只是为了加载视频。它仍然会保存否则会下载的垃圾文件，特别是对于移动设备，这 500KB 可能会造成伤害。

\n