加载前切换图像滞后

Question

我刚刚建立了这个网站。 http://colossalminds.com/

如果您向下滚动一点并将鼠标悬停在房屋，男人或交叉的剑上，它们将在图像切换为蓝色之前闪烁。 这主要发生在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的所有答案。

PS如何在该StackOverflow上轻松地将我的代码格式化为代码？ 截至目前，我在每行上单击空格键，这是一个很大的麻烦。

Answer 1

发生这种情况是因为仅加载了第一个图像。 直到那时，悬停时显示的图像才被加载，因此切换需要一秒钟的时间。

解决此问题的最佳方法是使用精灵。 这里是基础。

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>

（从这里拍摄）

或为图像创建两个div框。 z索引为0的花药，z索引为1的花药，并在悬停时更改z索引。 （z索引基本上是3D定位）

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

Answer 3

该路线将纠正该问题，即创建一个图像精灵以加载所有6张图像并在悬停时使用背景位置进行更改。

这会将六个GET请求减少到一个（节省很多），并确保所有请求都已加载。 一些信息http://css-tricks.com/css-sprites/