Question

我正在为组织制作一个github gist画廊，您可以在elsherbini.github.io/gist-gallery看到。

缩略图通过javascript放置在页面上，背景图像设置为内联样式规则。在Firefox和Internet Explorer中显示背景图像，而在Chrome和Safari中则不显示。

在firefox中，以下代码返回背景图片的正确网址，而在chrome中则返回"none"：

$($(".thumbnail")[0]).css("background-image")

因此我无法使用the following fix by andrew cantino：

function refreshBackgrounds(selector) {
  // Chrome shim to fix http://groups.google.com/a/chromium.org/group/chromium-bugs/browse_thread/thread/1b6a86d6d4cb8b04/739e937fa945a921
  // Remove this once Chrome fixes its bug.
  if (/chrome/.test(navigator.userAgent.toLowerCase())) {
    $(selector).each(function() {
      var $this = $(this);
      if ($this.css("background-image")) {
        var oldBackgroundImage = $this.css("background-image");
        setTimeout(function() {
          $this.css("background-image", oldBackgroundImage);
        }, 1);
      }
    });
  }
}

我尝试在网址中添加单引号，因为有些人已经建议在其他人出现类似问题时。如果我查看网络选项卡，它甚至都不会请求图像。如果我手动将背景图像属性设置为chrome devtools中的新规则，它可以工作，所以我知道这不是url格式或愚蠢语法错误的问题。

Chrome中有这个错误的解决方法吗？

Answer 1

另外（或者更确切地说），在我的浏览器中，由于缺少url（）声明的右括号，因此无法正确解析背景图像样式。修复它，然后使用$（）。css（）检索背景图像。

详细信息：我看到了

 <a style="background-image: url(https://../thumbnail.png" class="gist thumbnail" href="..">

应该是

 <a style="background-image: url(//../thumbnail.png)" class="gist thumbnail" href="..">

Answer 2

将$this.css("background-image", oldBackgroundImage);更改为$this.css('background-image', 'url(' + oldBackgroundImage + ')');

动态加载的CSS背景图片未在Chrome中显示

2 个答案: