Question

我不确定如何正确地说出标题，但这就是我发生的事情。我在html的主体中有两个图像。

<img src="http://www.narm.org.uk/home/images/Daylight%20design.jpg" id="b1" alt="day" />
<img src="http://www.aphoenix.ca/photoblog/photos/NighttimeColours.jpg" id="b2" alt="night" />

相应的css如下（基本上将其中一个作为背景）：

#b1, #b2 {
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
}

这是javascript：

window.onload = function() {
setBackground();
}

function setBackground() {
var back1 = $('#b1').hide();
var back2 = $('#b2').hide();
//setTimeout(function() {setBackground()}, 1000);
}

现在发生的事情是，一张图片会短暂显示，因为我等到页面加载后才隐藏两个背景。如何在页面完全加载之前隐藏背景？

Answer 1

也许你的图片上有css：

display: none;

所以，样式将如下：

#b1, #b2 {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    display: none;
}

Answer 2

我想你想使用jQuery.ready：

jQuery(function($) {
    var back1 = $('#b1').hide();
    var back2 = $('#b2').hide();
});

加载所有外部源（样式，脚本，图像等）时会触发window.onload函数。

当DOM准备就绪时，会触发jQuery的ready方法。

A little article about the difference

Answer 3

从window.onload调用中取出该函数，并将其移动到页面顶部的两个脚本标记之间。浏览器从上到下读取，因此它会在看到代码后立即执行。

所以让你的代码看起来像这样：

<head>...
<script>
setBackground();
</script>
...</head>

Answer 4

我认为你必须为此创建自定义功能，一旦页面准备就可以隐藏所有内容.load（）你隐藏你的背景然后显示新的背景和内容

Answer 5

如果我理解正确，您需要预先加载图片并将其隐藏起来，直到您需要它们为止。

而不是JavaScript，css似乎是去这里的方式。但是，如果您使用display:none;某些浏览器可能会决定延迟图像加载。我的建议是将图像移到屏幕外：

#b1, #b2 {
left: -9999px;
top: -9999px;
z-index: -1;
position: absolute;
}

[更新]这是display：none的测试页面： http://www.quirksmode.org/css/displayimg.html

它提到Opera不会加载图像。

窗口加载前运行功能

5 个答案: