Question

基本上我让网页加载所有内容，但由于图像很大，我宁愿在浏览器仍在下载时显示它。

相反，我希望在浏览器完成下载图像时显示此背景（带有淡入淡出效果）。

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

我一直在搜索这个功能，但我只发现了人们想要在另一个标签中显示/隐藏它们的情况（而不是全包装（在我的情况下为body））。

是否有可能或者我只是到达火星本身？谢谢你的帮助！

Answer 1

只需在页面加载后设置body background-image属性，如下所示：

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

请在此处查看：http://jsfiddle.net/duffmaster33/Z9pEg/

Answer 2

我建议你做以下事情：

将图像单独下载到文档中。
然后在JavaScript中加载图片

仅在下载完成后将其设置为后台（它将被缓存，因此您可以只指向图像的src并且它将起作用）

var img = new Image();
img.onload = function() { .$('body').css('background-image', 'url(' + http://path/to/image.jpg +  ')'); }
img.src = "http://path/to/image.jpg";

可选：仅在文档加载完成后运行所有内容（用函数体包装：

function () { $(ready) { function() { .$('body').css('background-image',                  'url(' +     http://path/to/image.jpg +  ')'); }  }

Answer 3

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

document.body.className = "bodyloaded";

因此将显示第二个css（将包含背景图像）。

Answer 4

如果使用$('body').hide，则隐藏整个元素而不仅仅是背景图像，即不会显示任何内容。只需使用css modifaction

设置背景图像

$('body').css("background-image", "url(picture.jpg)");

当图像本身准备好时显示背景图像

4 个答案: