JavaScript 创建图像和 document.readyState答案

【问题标题】：JavaScript create images and document.readyStateJavaScript 创建图像和 document.readyState
【发布时间】：2012-09-17 20:27:42
【问题描述】：

为了确保文件在做事之前准备好，我做了以下事情：

(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 代码中存在的图像，并且只有那些图像被加载？

提前致谢。

【问题讨论】：

标签： javascript image onload readystate

【解决方案1】：

你不需要你的setInterval。

From the MDN：

加载事件在文档加载过程结束时触发。在此时，文档中的所有对象都在 DOM 中，并且所有图像和子帧已完成加载。

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

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

由于这不考虑您稍后创建的图像，您可以这样做：

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

【讨论】：

请注意，如果yourImage.complete 为真，则yourImage.onload 不会在监听器附加时触发。
@David 是的。您通常在设置 onload 回调后设置 src。我将进行编辑以防止您提到的错误。
好的，谢谢，我认为在文档 100% 加载之前触发了 onload（但为什么 jQuery 会这样检查呢？）。我要试试这个。我的问题实际上来自 JavaScript / PHP 的混合，调试起来很糟糕。我什至不确定问题是否来自图像是否已加载...
jQuery 提出了load 和ready，有两个不同的目标。当您不需要加载图像时，后者可以更快地执行。

【解决方案2】：

在 jquery 中 document.ready() 函数是在整个 html 页面准备好时调用的，或者我们可以说 bind（在技术术语中）。

您应该尝试增加间隔时间。或包括执行这些东西的图像加载回调。

【讨论】：