JavaScript 创建图像和 document.readyState

Question

为了确保在执行操作之前准备好文档，我执行以下操作:

(function() {
    var interval = window.setInterval(function() {
        if("complete" === document.readyState) {
            window.clearInterval(interval);
            // Some stuff
        }
    }, 10);
})();

如果在我的代码中的某处，我会像这样从 JavaScript 创建图像:

var image = new Image();
image.onload = function() {
   // Some other stuff
};
image.src = 'some_url';

我在 document.readyState 上执行的检查是否也会等待加载“图像”，或者它只会等待 HTML 代码中存在的图像，并且只有那些图像被加载？

提前致谢。

Answer 1

您不需要您的setInterval。

From the MDN :

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.

您可以简单地为静态包含的图像执行此操作:

window.onload = function() {
    // Some stuff
};

因为这不考虑您以后创建的图像，您可以这样做:

window.onload = function() {
    var image = new Image();
    image.onload = function(){
        // Some stuff
    };
    image.src = 'some_url';
};