javascript - 预加载的图像未在 Chrome 中显示

Question

我正在预加载一些图像，然后在灯箱中使用它们。我遇到的问题是，虽然图像正在加载，但浏览器并未显示它们。

此问题特定于 Chrome。它在 Chrome 8 - 10 中一直存在，我一直在断断续续地尝试修复它，但一无所获。

我读过这些类似的问题，
Chrome not displaying images though assets are being delivered to browser
2 Minor Crossbrowser CSS Issues. Background images not displaying in Google Chrome?
JavaScript preloaded images are getting reloaded

它们都详细描述了类似的行为，但在 Chrome for Mac 中。而这发生在 Windows 中。

• 所有其他浏览器似乎都没问题。
• 如果您打开了 Firefox 和 Chrome，请在 Firefox 中加载页面，然后在 Chrome 中显示图像。
• 一旦您手动加载图像，使用 Webkit webdev 工具栏之类的东西，它们总是会显示
• 所有链接、图像等都很好并且有效
• 从 Chrome 中清除所有内容似乎没有任何区别(缓存、历史记录等)

如果有人有任何想法，那将非常有帮助，因为我在这里几乎没有选择。

PS，如有回复晚了请见谅，我明天休假一周! :D

更新 这是预加载图像的 javascript 函数。

var preloaded = new Array();
function preload_images() {
    for (var i = 0; i < arguments.length; i++){
        document.write('<');
        document.write('img src=\"'+arguments[i]+'\" style=\"display:none;\">');
    };
};

更新
我仍然对此有疑问，我已经删除了整个预加载图像功能。也许通过 document.write() 传递样式表不是最好的方法？

Answer 1

Chrome 可能不会预加载它们，因为它在没有显示的情况下写入 DOM，因此它可能足够智能，可以意识到它不需要呈现。试试这个:

var preloaded = new Array();

function preload_images(){
    for (var x = 0; x < preload_images.arguments.length; x++)
    {
        preloaded[x]     = new Image();
        preloaded[x].src = preload_images.arguments[x];
    }
}

Javascript Image 对象有很多有用的函数，您可能会发现它们很有用:

http://www.javascriptkit.com/jsref/image.shtml

onabort()

Code is executed when user aborts the downloading of the image.

onerror()

Code is executed when an error occurs with the loading of the image (ie: not found). Example(s)

onload()

Code is executed when the image successfully and completely downloads.

然后您还有 complete 属性，它的 true/false 告诉您图像是否已完全(预)加载。