延迟加载在 safari 和 firefox 中显示空白页面，直到完全加载

Question

我有一个包含大量医学视频的页面，这些视频通过 javascript 输入到网站中，导致网站速度变慢。我正在使用 blazy.js 向视频添加延迟加载，它在 chrome 中工作，但在 safari 和 firefox 中，它只显示一个空白页面，直到所有内容都完全加载。

编辑：1 这就是视频的加载方式

          <div id="A_b9c76c75" ></div>
          <script type="text/javascript" 
          src="https://viewmedica.com/js/vm.js"></script>
          <script type="text/javascript" >client = "1202";
          openthis = "A_b9c76c75";
          width = 720;
          vm_open()</script>

编辑结束 1

我尝试切换到lazyload.js 版本 8（版本 10 不适用于 safari 和 firefox），但同样的事情正在发生。

lazyload.js 版本：

<!--lazy loading-->
<script>
    (function(w, d){
        var b = d.getElementsByTagName('body')[0];
        var s = d.createElement("script"); s.async = true;
        var v = !("IntersectionObserver" in w) ? "8.11.0" : "10.11.1";
        s.src = "https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/" + v + "/lazyload.min.js";
        w.lazyLoadOptions = {}; // Your options here. See "recipes" for more information about async.
        b.appendChild(s);
    }(window, document));
</script>

<script>
    var myLazyLoad = new LazyLoad({
        elements_selector: ".lazy"
    });
</script>

然后我将“懒惰”类添加到所有 iframe。

blazy.js 版本：

添加了这个cdn：

https://cdn.jsdelivr.net/npm/blazy@1.8.2/blazy.min.js

然后将“b-lazy”类添加到所有 iframe。

Answer 1

我不确定您是如何将视频添加到 html 中的，但您可以使用视频元素的 preload 属性。 链接在这里：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-preload

此外，您还可以设置海报属性以在视频加载时添加占位符。

<video preload="auto" poster="my-placeholder.jpg">
  <source src="my-video.mp4" type="video/mp4">
</video>