3

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

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

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

现在，这在任何地方都可以完美运行，但在谷歌浏览器中，背景图像不会显示。奇怪的是，我使用调试中断仔细查看并注意到背景图像实际上设置正确（意味着它在当时的元素的 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 中，由于预览容器的背景设置不正确，您总是会短暂地看到后面的元素闪烁。

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

谢谢你和最好的问候，迈克尔

4

1 回答 1

0

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

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

于 2013-04-08T08:11:14.637 回答