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

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

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { createLogger } from 'redux-logger';
import rootReducer from '../_reducers';
import { composeWithDevTools } from 'redux-devtools-extension';

const loggerMiddleware = createLogger();

export const store = createStore(
    rootReducer,
    composeWithDevTools(
    applyMiddleware(
        thunkMiddleware,
        loggerMiddleware
    )
));

延迟加载会在Safari和Firefox中显示空白页，直到完全加载

1 个答案: