Question

如果向下滚动并将鼠标悬停在房屋，男人或交叉的剑上，它们会在图像切换为蓝色之前闪烁。这主要发生在Firefox中，但有时它发生在Chrome中。

有没有办法阻止这个。我试过像这样预加载我的所有图像，但它没有帮助：

/*preload*/
body:after{
    content: url(../images/header_bg.jpg) url(../images/homeHover.png) url(../images/content_middle.jpg) url(../images/graph.png) url(../images/home.png) url(../images/logo.png) url(../images/man.png) url(../images/manHover.png) url(../images/phones1.png) url(../images/speech.png) url(../images/speech1.png) url(../images/swords.png) url(../images/swordsHover.png)  url(../images/time1.png) url(../images/PieChart.png) url(../images/unique.jpg)   
    display: none;
}

我对任何涉及html，css或javascript的答案持开放态度。

P.S。如何轻松地将我的代码格式化为此StackOverflow上的代码？截至目前，我正在点击每一行的空格键，这是一个巨大的痛苦。

Answer 1

这种情况正在发生，因为只加载了第一张图片。悬停时显示的图像在此之前未加载，因此需要一瞬间切换。

解决此问题的最佳方法是使用精灵。 Here are the basics.

Answer 2

好像预装图像的css代码实际上并没有预加载它们。

尝试使用javascript解决方案，例如：

<div class="hidden">
<script type="text/javascript">
    <!--//--><![CDATA[//><!--

        if (document.images) {
            img1 = new Image();
            img2 = new Image();
            img3 = new Image();

            img1.src = "http://domain.tld/path/to/image-001.gif";
            img2.src = "http://domain.tld/path/to/image-002.gif";
            img3.src = "http://domain.tld/path/to/image-003.gif";
        }

    //--><!]]>
</script>

(taken from here)

或者为图像创建两个div框。一个z-index为0，另一个z-index为1，并在悬停时更改z-index。（z-index基本上是3D定位）

PS。我认为代码格式可能与您的声誉有关 - 尽管这里仍然是一个菜鸟

Answer 3

路线需要更正这是创建一个图像精灵来加载所有6个图像并使用背景位置在悬停时更改。

这会将六个GET请求减少到一个（好节省）并确保它们全部被加载。一些信息 http://css-tricks.com/css-sprites/

加载前切换图像滞后

3 个答案: