动态设置背景图片不在 Chrome 中显示答案

【问题标题】：Dynamically set background image not showing in Chrome动态设置背景图片不在 Chrome 中显示
【发布时间】：2013-03-29 18:22:19
【问题描述】：

我遇到了一个 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 中，由于预览容器的背景设置不正确，您总是会短暂地看到后面的元素闪烁。

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

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

【问题讨论】：

这似乎对我有用？虽然我认为有更好的方法可以通过 css3 过渡来实现这种效果？
有吗？当您从一个项目悬停到下一个项目时，您没有看到当前选定的项目在两者之间短暂显示？至于 CCS3 转换：是的，但我担心的是 IE 兼容性。也许只有在没有解决此问题的情况下，我才会让它在兼容的浏览器中使用转换。感谢您的反馈。 ; )
其实不是... jQuery 似乎没有正确显示 cnt-content-preview
@Njord：mouseleave 中的代码与mouseenter 中的代码冲突。您在清除previewDelay 的同时再次设置它并淡入另一张图像。这个问题在其他浏览器中可能不那么明显，这可能是也可能不是由于其他浏览器处理事件订单的方式。无论哪种方式，如果您可以设法在 jsFiddle 中演示该问题，它将使我们能够使用代码，测试不同的解决方案。一旦您链接的网站消失、死亡或发生变化，它还会使您的问题对未来有类似问题的用户更有用。
我会以不同的方式来做这件事，一旦它后面的图像被加载并设置为较低的 z-index，就会让你的叠加图像淡出。类似于这个例子simonbattersby.com/blog/simple-jquery-image-crossfade

标签： javascript jquery css google-chrome background-image

【解决方案1】：

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

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

【讨论】：