javascript - 动态设置背景图片在Chrome中不显示

Question

我遇到了 div 背景图像在 Chrome 中未显示的问题。

我正在开发的一个网站有两个图像容器叠在一起:z-index 较低的一个显示当前选定的图像，而 z-index 较高的一个用于在预览时预览其他图像。用户将鼠标悬停在导航中的某个元素上。

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

现在，这在任何地方都可以完美运行，但在 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 中，由于预览容器的背景设置不正确，您总是会短暂地看到后面的元素闪烁。

我有点不知道这种行为是从哪里来的，所以任何帮助将不胜感激。 ; )

谢谢您并致以最诚挚的问候， 迈克尔

Answer 1

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

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