预装的图片在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

这些问题都描述了类似的行为，但发生在Mac版Chrome浏览器中，而我遇到的是Windows版Chrome浏览器。

• 所有其他浏览器都正常。
• 如果您同时打开Firefox和Chrome浏览器，在Firefox中加载页面，然后在Chrome中，图像将出现。
• 一旦您手动加载了这些图像，它们就会始终显示出来。
• 所有链接和图像等都很好且有效。
• 清除Chrome浏览器中的所有内容（缓存，历史记录等）似乎没有任何区别。

如果有人有任何想法，那将非常有帮助，因为我真的已经无计可施了。

更新： 这是预加载图像的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()来提供样式表并不是最好的方法？

- David Yell

---

能否把代码粘贴一下，这样我们就可以看到你是如何预加载的？ - jlindenbaum

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，告诉您图像是否完全（预）加载。

- Tom Gullen

---

我会在20小时后添加奖励 :) - David Yell

是的，在Chrome中，预加载似乎比仅添加图像要复杂一些！ - David Yell

Answer 2

原来Chrome会考虑HTTP缓存，并且如果缓存设置不正确，则会在预加载后立即丢弃任何预加载的图像。

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

为了解决这个问题，我必须设置以下内容：

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

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

- Registered User

---

我通过PHP生成图像，然后想知道为什么Google Chrome会丢弃预加载的图像。后来我发现我将过期日期设置在了过去。感谢你提供的信息，伙计。 - viji