如何延迟加载第三方视频(通过javascript提供)

Question

我正在建设这个网站，其中有17个模态，大多数模态都有一些医学视频，这些视频是由第三方公司(查看medica)通过javascript提供的。这会导致页面需要更长的加载时间。

我想知道它们是否是延迟加载视频的方法，以帮助提高加载速度。

第3方视频提要的示例：

                <!-- ViewMedica Embed Start -->
            <div id="A_0fd328f1"></div>
            <script type="text/javascript" src="https://viewmedica.com/js/vm.js"></script>
            <script type="text/javascript">client="1202"; openthis="A_0fd328f1"; width=720; vm_open()</script>
            <!-- ViewMedica Embed End -->

该网站是建立在Bootstrap 4。我不知道如果客户会同意我在这里张贴他们的网站，但如果有什么我可以做的，以帮助解决这个问题，请让我知道。

谢谢

Answer 1

看起来一切都很顺利，而且延迟加载正在工作(尽管我一直在寻找一个正式告诉您延迟加载正在工作的工具)，但是站点工作得很好。页面加载。你可以滚动所有内容，然后视频开始一个接一个地加载，没有页面跳转或任何东西。

我发现添加延迟加载的最简单的方法是blazy.js https://github.com/dinbror/blazy#demo

我为什么使用blazy.js：

• 它是轻量级的，小于1.4KB，如果你不需要IE7- support的话也小于1.25KB。
• 它非常容易使用(你只需要在你的html中链接javascript，然后使用b-lazy类来实现你想要的延迟加载)。

这个东西是完美的，希望它能帮助其他人。