0

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

#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;
    }
4

3 回答 3

2

Use sprites with positioning.

Find more information at W3 Schools

于 2013-03-07T18:27:16.623 回答
0

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

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

（不要真正使用内联样式）然后，如果您使用的是 jquery

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

清理。

于 2013-03-07T18:27:35.413 回答
0

您看到空白背景的原因是因为尚未从服务器加载悬停图像。为避免这种情况，请预加载图像。有几种方法可以做到这一点，但概念是相同的：强制浏览器在实际需要之前加载图像。这是使用 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' ]);
于 2013-03-07T18:34:47.297 回答