Question

我遇到了一个问题，即在Chrome中没有显示div的背景图片。

我正在处理的网站有两个图像容器位于另一个上面：具有较低z-index的图像显示当前所选图像，而具有较高z-index的图像容器用于预览其他图像时用户将鼠标悬停在导航中的某个项目上。

基本上，应该发生的是每次将鼠标光标从一个导航项移动到下一个导航项时，旧预览图像将保存为预览图像容器的背景，然后保存为预览容器中的实际图像是隐藏的（没有被注意到，因为图像仍然在背景中），交换新图像然后淡入。淡入淡出应该直接从旧图像发生，这就是我设置旧图像的原因作为之前的背景。

现在，这种方法在Google Chrome中无处不在，但在Google Chrome中，背景图片无法显示。奇怪的是，我已经使用调试中断仔细观察并注意到背景图像实际上是正确设置的（意味着它在当时元素的CSS中正确列出），但它没有显示在浏览器。

var previewDelay; 
$("#cnt-navigation_secondary").find(".txt-navigation_secondary").mouseenter(function(){
    var newImage = $(this).find("img").attr("src");
    var oldImage = $("#img-content-preview").attr("src");
    previewDelay = setTimeout(function(){
        $("#cnt-content-preview").show(); //The previewing container is shown (in case it was hidden before).
        $("#cnt-content-preview").css({"background-image":"url("+oldImage+")"}); //The old image is set as the background of the previewing container
        $("#img-content-preview").hide(); //The image inside the previewing container is hidden. All browsers but Chrome now show still show the same image, as it is in the background, but Chrome doesn't, even though it's visible in the CSS.
        $("#img-content-preview").attr("src", newImage); //The source of the hidden image is set to the new image.
        $("#img-content-preview").fadeIn(400); //The new image is faded in.           
    },100);
}).mouseleave(function(){
    clearTimeout(previewDelay);
});

您可以在此处查看完整的内容：http://www.haasarchitektur.at/index.php?main=1&siteid=403 尝试将鼠标悬停在架构子区域中的项目上。例如，在Firefox中，预览图像会从一个项目流向另一个项目，而在Chrome中，由于未正确设置预览容器的背景，因此您将始终短暂地看到背面的元素闪烁。

我有点不知道这种行为来自哪里，所以任何帮助都会非常感激。 ; ）

谢谢你＆amp;最好的祝福，迈克尔

Answer 1

背景图片似乎没有加载，因为它是一个非常大的文件？我尝试了您的示例将背景颜色设置为红色而不是更改图像，它工作正常并阻止原始图像显示。您可能需要找到一种方法将背景图像放在div中，这样它就已经在浏览器中加载了。

由于您已经加载了导航菜单中的图像，您可以修改css以便jquery覆盖此图像，直到真实图像准备就绪？

动态设置未在Chrome中显示的背景图像

1 个答案: