0

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

相反，我想在浏览器完成下载图像时显示此背景（具有淡化效果）。

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

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

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

4

4 回答 4

0

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

document.body.className = "bodyloaded";

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

于 2013-05-19T18:07:21.873 回答
0

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

$('body').css("background-image", "url(picture.jpg)");
于 2013-05-19T18:07:43.010 回答
0

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

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

在这里看到它：http: //jsfiddle.net/duffmaster33/Z9pEg/

于 2013-05-19T18:07:05.683 回答
0

我建议您执行以下操作：

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

  3. 仅在下载完成后将其设置为背景（它将被缓存，因此您只需指向图像的 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";

  4. 可选：仅在文档加载完成后才运行所有内容（使用以下命令包装函数体： 

    function () { $(ready) { function() { .$('body').css('background-image',                  'url(' +     http://path/to/image.jpg +  ')'); }  }
于 2013-05-19T18:07:13.660 回答