动态设置Chrome中不显示的背景图片

我遇到了一个问题，Chrome中没有显示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 尝试悬停在架构subnav项目。例如，在Firefox中，预览图像会从一个项目流畅地变为另一个项目，而在Chrome中，由于预览容器的背景设置不正确，您总是会短暂看到后面的元素闪烁。

我有点不知所措，因此任何帮助将不胜感激。 ; ）

谢谢&最好的问候，迈克尔

来源

2013-04-07 Njord

它似乎为我工作？尽管我认为有更好的方法可以通过css3过渡来实现这种效果？ – 2013-04-07 18:30:49

它呢？当您从一个项目悬停到下一个项目时，您看不到当前选定的项目之间短暂显示？至于CCS3的转换：是的，但我担心IE兼容性。也许我会在兼容的浏览器中使用转换，只有在没有解决这个问题的情况下。感谢您的反馈。 ; ） – Njord 2013-04-07 18:52:26

居然没有它不是... jQuery似乎没有正确显示cnt-content-preview – 2013-04-07 20:29:14

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

由于您已经将图像加载到导航菜单中，您可以使用CSS让jquery覆盖这个图像，直到真实图像准备好了？

来源

2013-04-08 08:11:14

动态设置Chrome中不显示的背景图片

回答

相关问题