代码之家 › 专栏 › 技术社区 › posfan12

检测文档(包括图像)何时完全加载

dom javascript

posfan12 · 技术社区 · 5 年前

我有一个包含大约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>

应该发生什么:

渲染带有文本“Loading…”的灰色屏幕
加载大网格图像的同时(实际上紧接着)出现小灰色框

Firefox 72中会发生什么:

渲染带有文本“Loading…”的灰色屏幕
加载大网格图像前出现灰色小框

不知道如何让事情慢下来,所以差异是显而易见的。你可以尝试复制/粘贴大网格图像100次,每次向右移动1024px。

1 回复 | 直到 5 年前