Question

我有一个包含100张图像的HTML页面。如何检测页面何时完全加载，包括所有图像？我一直在使用以下代码，它似乎可以在Chrome 80中使用。

document.onreadystatechange = function () {
    if (document.readyState == "complete") {
        setTimeout(init, 10);
    }
}

但是，Firefox 72立即触发init函数。当init功能启动后，我可以看到它们弹出并下载的图像。是否有跨浏览器方法可以满足我的需要？谢谢。

我已经尝试过window.onload，document.onreadystatechange和window.addEventListener('load', ...)。

仅供参考，图像文件为PNG格式，但嵌入在SVG文件中。并将SVG文件嵌入HTML文件中。如果需要，我可以发布链接。

编辑：这是我所能做到的最低要求。

<!DOCTYPE html>
<html>
    <head>
        <title>minimal reproducible example</title>
        <meta charset="UTF-8">
        <style>
body    {padding:0;margin:0;color:#ffffff;background-color:#404040;}
#cross  {z-index:2;position:fixed;left:50%;top:50%;visibility:hidden;}
#embed  {z-index:1;visibility:hidden;}
#load   {z-index:-1;position:fixed;display:inline-block;left:50%;top:50%;width:10em;margin-left:-5em;text-align:center;}
        </style>
        <script>
function init() {
    // in firefox 72 the embedded PNG images are loaded noticeably after the SVG image is made visible instead of before
    document.querySelector('#embed').style.visibility = 'visible';
    document.querySelector('#cross').style.visibility = 'visible';
}
window.onload = function () {
    setTimeout(init, 10);
}
        </script>
    </head>
    <body>
        <div id="load">Loading...</div>
        <svg id="embed" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1024" height="1024" viewBox="0 0 1024 1024">
            <image width="1024" height="1024" x="0" y="0" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAQABAMAAACNMzawAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAwUExURQAAAP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFulh5UAAAAJcEhZcwAADsMAAA7DAcdvqGQAAApaSURBVHja7dqxDQNBEAMxt3D9N+sePhGwQ+VMJtbPzMzMzMzMzMzMzMzMzMzM7u59HH/DCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHFvZmZmZmZmZmZmZmZmZmZmB7c+JPBbL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9mZmZmZmZmZmZmZmZmZmZHdz6kMBvvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3ZmZmZmZmZmZmZmZmZmZmdnDrQwK/9QLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2Dcm5mZmZmZmZmZmZmZmZmZ2cGtDwn81gsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxb2ZmZmZmZmZmZmZmZmZmZge3PiTwWy9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvZmZmZmZmZmZmZmZmZmZmR3c+pDAb72AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY92ZmZmZmZmZmZmZmZmZmZnZw60MCv/UCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g0r/3B7oXJhneLUE8AAAAAElFTkSuQmCC" />
        </svg>
        <img id="cross" width="16" height="16" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAAsSURBVDhPY2xoaPjPQAkAGQAEDORgkF4mqDlkg1EDRg0AgVEDGBgozM4MDAB7ETPvhopeAgAAAABJRU5ErkJggg=="/>
    </body>
</html>

应该发生什么：

呈现灰屏，显示文本“正在加载...”
在加载大网格图像的同时（实际上是紧接在紧随其后）出现一个小的灰色框

在Firefox 72中会发生什么：

呈现灰屏，显示文本“正在加载...”
在加载大的网格图像之前会出现一个小的灰色框

不确定如何足够慢地放慢速度，以使区别明显。您可以尝试将大网格图像复制/粘贴100次，每次将其向右移动1024px。

检测何时完全加载了文档（包括图像）

0 个答案: