切换图像在加载前有延迟

Switching Images Lag Before Loading

本文关键字：延迟 加载 图像      更新时间：2023-09-26

我刚刚建立了这个网站。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。

注:我怎么能很容易地得到我的代码被格式化为这个StackOverflow上的代码?到目前为止，我每行都要按空格键，这很麻烦。

这是因为只加载了第一张图像。悬停时显示的图像在此之前不会加载，因此切换需要很短的时间。

解决这个问题的最佳方法是使用精灵。以下是一些基本信息。

看起来好像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>

(from here)

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

p。我认为代码格式可能与你的声誉有关——尽管在这里还是个新手

纠正这个问题的方法是创建一个图像精灵来加载所有6张图像，并在悬停时使用背景位置来改变。

这将把六个GET请求减少到一个(很好的节省)，并确保它们都被加载。一些信息http://css-tricks.com/css-sprites/

相关文章：