Question

如何加载原始图像，以便当用户将光标移到图像顶部时，它应该自动更改而不显示白色背景然后加载原始图片？是否有任何代码加载我的网页加载时的原始图像？请告诉我。我的代码是：

#middlefoto{
    background-image:url(../images/middleblack.jpg);
    margin-left:1px;
    height:158px;
    width:333px;
    }
#middlefoto:hover{
    background:#fff url(../images/middlecolor.jpg) 0 0 no-repeat;
    }

Answer 1

使用精灵定位。

在W3 Schools

上查找更多信息

Answer 2

将图像包含在离屏元素中（使用CSS将其推出屏幕）。这将导致浏览器下载图像，以便它可以为翻转做好准备。您可以在页面加载后清理屏幕外图像。

<img src="rollover image" class="preloader" style="position:absolute; margin-left:-99999px" />

（不要真正使用内联样式）然后，如果你正在使用jquery

$(document).ready(function(){ $('.preloader').remove(); });

清理。

Answer 3

您看到即时空白背景的原因是因为尚未从服务器加载悬停图像。为避免这种情况，请预加载图像。有几种方法可以做到这一点，但概念是相同的：强制浏览器在实际需要之前加载图像。以下是使用JavaScript执行此操作的简单方法：

function preloadImages(sources)
{
    var img = new Image();
    for (var i = 0; i < sources.length; i++) {
        img.src = sources[i];
    }
}

preloadImages([ '../images/middlecolor.jpg', 'image2.jpg', 'image3.jpg' ]);

悬停效果不正常

3 个答案: