为何会在safari和firefox中显示空白页,直到完全加载?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (171)

我有一个有很多医学视频的网页,这些视频是通过javascript输入网站的,这导致了网站的速度减慢。我使用blzy.js将延迟加载添加到视频中,它在Chrome中工作,但在Safari和Firefox中,它只显示一个空白页面,直到全部加载完毕。

我尝试切换到lazyload.jsVersion 8(版本10不适用于Safari和Firefox),同样不行。

lzyload.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>

然后,我将“lazy”类添加到所有iframe中。

js版本:

添加了CDN:

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

然后在所有的iframes中添加“b-lazy”类

提问于
用户回答回答于

我不知道你是如何将视频添加到html中的,但是你可以对视频元素使用preload属性。https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-preload

此外,还可以设置POST属性,在视频加载时添加占位符。

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

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励