chrome 不渲染 gif 背景图片答案

【问题标题】：chrome does not render gif background imagechrome 不渲染 gif 背景图片
【发布时间】：2011-12-16 18:59:37
【问题描述】：

当前运行的是 chrome 14，它无法在我的登录页面上呈现旋转的 gif 图形。

这是页面在 chrome 中的样子：

这是它在所有其他浏览器上的样子：

复制：

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

输入一个有效的电子邮件和密码并点击“登录”，然后当黑色进度指示器出现时，点击停止，这样浏览器就没有机会给你一个登录错误。

请注意，背景不会以 chrome 显示。有趣的是，如果您检查元素，并将背景图像位置添加 1px，图像将变得可见。

我闻起来像 chrome 错误，但有解决方法吗？

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

【问题讨论】：

标签： javascript css google-chrome

【解决方案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">');

然后尝试正常登录 - 我看到了微调器。

所以我认为如果你预加载你的微调器图像，也许使用上面的代码，它应该可以正常工作。

【讨论】：

如果你想让它依赖于 CSS，你可能想使用这个 var bg = $(this).css('background-image'); bg = bg.replace('url(','').replace(')',''); var forceChromeToLoadImage = $('<img src=' + bg + '>'); 参见 stackoverflow.com/questions/8809876/…

【解决方案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

中得到修复

【讨论】：