Chrome无法渲染GIF背景图片

Question

目前正在运行Chrome 14，但无法在我的登录页面上渲染旋转的GIF图形。

以下是Chrome中页面的样子：

以下是其他所有浏览器中的页面样子：

重现方法：

http://trunk.test.openmile.com/login/#null

输入有效的电子邮件和密码，然后点击“登录”，当黑色进度指示器出现时，点击“停止”以使浏览器没有机会给您提供登录错误。

请注意，在Chrome中未显示背景。有趣的是，如果检查元素并将1px添加到背景图像位置，则图像将变为可见。

对我来说，这似乎是一个 Chrome错误，但是否有解决方法？

编辑：另一个非常奇怪的事情是：如果我在显示此处理div的函数末尾放置一个alert，则在警报之后，背景图像将变为可见。

- mkoryak

Answer 1

我能复现您的问题，但是如果我在控制台手动触发弹出窗口，我能看到旋转加载图标:

> OM.processing($('div.portlet.login form'));

我的猜测是 - 您的旋转器未被预加载，并且您正在等待 AJAX 请求时打开窗口。由于某种原因，其他浏览器将在 AJAX 请求等待期间加载图像，但 Chrome 不会。为了测试这一点，我在控制台中尝试了以下内容：

> var img = $('<img src="http://trunk.test.openmile.com/static/9753/images/processing_black.gif">');

然后我尝试正常登录 - 然后我看到了旋转图标。

因此，我认为如果您预加载旋转图像，可以使用上面的代码，并且它应该正常工作。

- nrabinowitz

---

如果您希望保持CSS依赖性，您可能想使用以下代码:var bg = $(this).css('background-image'); bg = bg.replace('url(','').replace(')',''); var forceChromeToLoadImage = $('<img src=' + bg + '>'); 参见 https://dev59.com/6Goy5IYBdhLWcg3wCpvQ - Adriano

Answer 2

我在使用 nrabinowitz 的答案时遇到了问题。

最终我将相关图片包含在页面中，但大小设置为0。

HTML：

<input class="button" id="myButton" type="submit" name="searchButton" />
...

<img class="loaderHackForChrome" src="" width="0" heigh="0">

Javascript：

/*
  Hack for Chrome issue with GIF bg images
    [1] gets the bg url from the CSS
    [2] Extract the path: by removing opening string "url(" and closing character ")" that surround it
    [3] Sets the relevant image tag with our GIF image's path
*/
$('#myButton').click( function() {
    var bg = $(this).css('background-image');   // [1]
    bg = bg.replace('url(','').replace(')',''); // [2]
    $('.loaderHackForChrome').att('src', bg);   // [3]
});

来源: http://chromespot.com/forum/google-chrome-troubleshooting/4336-background-image-doesnt-load.html

编辑: 这个问题可能已经在2016年得到解决。

- Adriano