未在 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()

代码在用户中止时执行 下载图片。

onerror()

发生错误时执行代码 随着图像的加载（即：不是 成立）。示例

onload()

当图像执行时代码 成功且完全下载。

然后您还拥有 complete 属性，该属性的 true/false 会告诉您图像是否已完全（预）加载。

Answer 2

事实证明，Chrome 会考虑 HTTP 缓存，如果缓存被错误地设置为过期，则会在预加载后立即丢弃任何预加载的图像。

在我的例子中，我是动态生成图像的，默认情况下，响应会立即过期发送到浏览器。

要修复它，我必须设置以下内容：

        Response.Cache.SetExpires(DateTime.Now.AddYears(1));
        Response.Cache.SetCacheability(HttpCacheability.Public);

        return File(jpegStream, "image/jpeg");