当图像本身准备好时，显示<body>背景图像

Question

基本上，我让网页加载所有的东西，但是由于图像很大，我宁愿在浏览器还在下载的时候不显示它。

相反，当浏览器完成图像下载时，我想显示这个背景(带有衰落效应)。

问题是，background-image必须在body标记中设置，所以我不想通过使用$('body').hide;或$('body').show;来应用jQuery，因为它实际上隐藏了整个网页。

我一直在搜索这个特性，但只有当人们想要在另一个标记中显示/隐藏它们时(而不是全包装的一个(我的例子中是body)，我才会找到这种情况)。

这是可能的还是我只是到达火星本身？谢谢你的帮忙!

Answer 1

只需在页面加载后设置body背景图像属性，如下所示：

jQuery('body').css('background-image', 'url(path/to/some/image.jpg)');

请看这里：http://jsfiddle.net/duffmaster33/Z9pEg/

Answer 2

我建议你做以下几点：

1. 将图像单独下载到文档中。
2. 然后在JavaScript中加载图像
3. 只在下载完成后才将其设置为背景(它将被缓存，因此您只需指向图像的src即可工作) img.onload =函数(){.$(‘body’).css(‘背景-图像’，'url(‘+ http://path/to/image.jpg + ')')；} img.src = "http://path/to/image.jpg"；
4. 可选:只在文档加载完成后运行所有操作(将函数体包装为: function() {.$(‘body’){ function (‘body’).css(‘背景-图像’，'url(‘+ http://path/to/image.jpg + ')')；}}

Answer 3

您必须创建两个CSS类。bodyloading和bodyloaded.第一个是body标记的默认类名。加载页面后，可以将主体标记类名更改为bodyloaded

document.body.className = "bodyloaded";

因此，将显示第二个css (包含背景图像)。