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");

预加载的图片未在Chrome中显示

2 个答案: