javascript - Edge 预加载所有 html 媒体资源？页面加载缓慢

Question

我的页面底部有一个函数，它检查我的页面是否加载了所有资源。在 Chrome 和 Firefox 上，它工作得很好，但在 Edge 上，它需要很长时间，以至于“令人难以置信”。例如，如果我的网站上有许多 html5 音频源，那么我的 document.readyState 达到“完成”需要非常长的时间。但是，删除这些 html5 媒体元素(普通音频标签)会使脚本立即达到“完整”状态。

视频也是如此。在其他浏览器中的加载，甚至移动 Chrome 都非常快，在 Edge 中，它似乎预加载了整个内容，就像字面上的资源一样，即使我当前不需要它。

这是我的页面加载脚本的骨架:

   function initLoader() {
        var pageLoading;

        // Does some stuff

        document.onreadystatechange = function() {
            pageLoading = document.readyState;

            if (pageLoading == 'interactive') {
                // Loading

            } else if (pageLoading == 'complete') {
                // Loading done
            }
        }
    }

我使用的媒体:

  // Full screen, video is 1920 x 1080. 4 MB. 30 seconds long.

  <video playsinline autoplay muted loop>
    <source src='MyVideo.mp4' type='video/mp4'>
  </video>

  // MP3 audio with max quality. I have like 20 of those audio tags on my page. All around 4-6 MB. 3 minutes long.

  <audio>
    <source src='MyAudio.mp3' type='audio/mpeg'>
  </audio>

我知道有问题的文件确实很大，但这不应该是一个问题，在 Chrome 和 Firefox 中它运行得非常快，它实际上只是 Microsoft Edge 对我来说失败了。

为什么 Edge 的行为如此奇怪，导致我的页面加载需要很长时间？我该如何解决这个问题？

Edge 在 Windows 10 上运行。

Answer 1

就像其前身一样，Edge 不支持预加载属性。而且似乎无论在什么情况下，Edge 都会下载它看到的所有内容。因此，如果您有 100 个媒体元素，Edge 会下载所有这些元素。如果你问我我就疯了。

我的解决方案是删除 src 或向其中添加一个空字符串，并在需要时动态地将 URL 应用于媒体。