jQuery：如何在大型背景图像之前加载显示加载图形，在 css 中设置，加载然后背景图像淡入？答案

【问题标题】：jQuery: How do I load a display a loading graphic before a large background image, set in css, loads then have the background image fade in?jQuery：如何在大型背景图像之前加载显示加载图形，在 css 中设置，加载然后背景图像淡入？
【发布时间】：2011-05-29 13:55:57
【问题描述】：

我正在重新设计我的个人网站，并使用全尺寸图片作为网站背景。加载时间比网页的其余部分要长得多，而且我不能再减小文件大小了，所以...
使用 jQuery，我想在背景中显示一个动画加载 gif，直到图像加载然后淡入图像。
我有以下 jQuery 代码，可以很好地淡入图像；

$(document).ready(function(){ 
   $('#bodybg').fadeIn(2000);
});

我想考虑在 css id 中添加一个类，然后将加载图像分配给该类，并在图像加载后让 jQuery 剥离该类。类似：

$('#bodybg') .removeClass('loading')

但我有点坚持把它完全放在一个有效的格式上？有人可以帮忙吗？

【问题讨论】：

标签： jquery image background load fade

【解决方案1】：

你可以尝试给fadeIn添加一个回调函数。

$("#bodybg").fadeIn(2000, function(){
  $("#bodybg").removeClass('loading');
})

【讨论】：

【解决方案2】：

$(window).load(function() {
    jQuery('#bodybg').fadeIn();
});

或者您可以加载一个白屏并淡入网站：

css:

div#loading { position: absolute; top:0px ; bottom: 0px; left: 0px; right: 0px; background-color: white; z-index: 1000;}

和 Jquery

$(window).load(function() {
    jQuery('#loading').fadeOut();
});

和 html（紧跟在 body 标签之后）

<div id="loading"></div>

【讨论】：

【解决方案3】：

好的，谢谢你们。你的两个输入都有帮助。我设法让加载器 gif 显示然后淡出，并且图像在加载后淡入。我现在有一个很好的效果，向用户表明页面正在加载并且很好地淡出。

HTML 是...

<div class=loading style="display:none;"></div>

放在body标签之后...

<div class="bodybg"></div>

紧随其后。

jQuery 是...

$(document).ready(function(){
    jQuery('#loading').fadeOut(8000);});
$(document).ready(function(){   
    jQuery('#bodybg').fadeIn(3000)});

我让页面的主要内容以 3000 的速度立即淡入，所以这一切真的很好。

设置的 css 是...

#bodybg { width: 100%; height: 100%; background: url(../images/body/mainbg.jpg) no-repeat fixed center 0 transparent; position: absolute; z-index: 0; }

#loading { width: 100%; height: 100%; background: url(../images/body/ajax-loader.gif) no-repeat fixed center 100px; position: absolute; z-index:-1;}

当网页首次加载到浏览器中时，背景为白色，网站的徽标和内容立即可见。在主要内容上方，加载器 gif 保持动画状态，直到背景图像最终加载并覆盖它，同时它在背景后面不到一秒后淡出。

由于在用户浏览器下载后不需要加载背景图像，因此导航到其他页面看起来很流畅，因为加载器 gif 显示并随着其余内容的淡入而淡出。

非常感谢您的帮助和指导。

安迪·斯米夫

【讨论】：