1

我不确定如何正确地用词标题，但这就是我正在做的事情。我在 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);
}

现在发生的情况是，一个图像将短暂显示，因为我正在等待页面加载以隐藏两个背景。我将如何在页面完全加载之前隐藏背景？

4

5 回答 5

3

也许在您的图像上使用 css：

display: none;

因此，样式将如下所示：

#b1, #b2 {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    display: none;
}
于 2012-11-14T16:37:36.153 回答
1

我想你想使用jQuery.ready：

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

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

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

关于区别的小文章

于 2012-11-14T16:37:41.053 回答
0

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

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

<head>...
<script>
setBackground();
</script>
...</head>
于 2012-11-14T16:38:59.927 回答
0

如果我理解正确，您想预加载图像并将它们隐藏起来，直到您需要它们。

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

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

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

它提到Opera不会加载图像。

于 2012-11-14T17:09:23.300 回答
0

我认为你必须为此创建一个自定义函数，你可以隐藏所有内容，一旦页面准备好 .load() 你隐藏你的背景然后显示新的背景和内容

于 2012-11-14T16:43:55.740 回答