单图像Jquery预加载器

我在我正在开发的网站上使用相当大的背景图像。 目前，背景颜色加载，当图像加载完成后，它会加载。 那很好; 但是，我试图实现一个效果，其中预加载器gif旋转，直到背景图像加载，然后淡入。目前这里是我的Jquery（它根本不工作）

$(document).ready(function(){ $('span.loader').show(); $("body").css('background-image','url(images/bg.jpg)').ready(function(){ $("span.loader").hide(); }); }); 

这不是我想要的 – 我想在加载时显示背景颜色并在span.loader显示一个加载器。 当身体的背景图像完成加载时，我希望它淡入（在加载器顶部或隐藏加载器）。 有任何想法吗？ 以下是我的基本CSS：

 body{background:url(images/bg.jpg) 50% 0 no-repeat #e6f8bb; font-family:'Arvo'; sans-serif;} span.loader{position:absolute; top:39px; left:484px;height:31px; width:31px; background-image:url(images/loader.gif); display:none;} 

Answer 1

如果你用旋转器（而不是身体）将身体大小的DIV设置为背景颜色，然后简单地添加身体背景并慢慢增加DIV的透明度直到它完全透明，然后将其移除。 您必须将此DIV的z-index设置为高于正文，但低于页面上的内容。

然后你可以使用@ Groovetrain的技巧来检查图像是否被加载以触发显示。

 body{background-color: #e6f8bb; font-family:'Arvo'; sans-serif;} body.loaded {background:url(images/bg.jpg) 50% 0 no-repeat #e6f8bb;} div.reveal{position: absolute; height: 100%; width: 100%; z-index: 1; background-color: #e5f8bb;}; span.loader{position:absolute; top:39px; left:484px;height:31px; width:31px; background-image:url(images/loader.gif); } #content { z-index: 2 }   
   
 
 ... 
  

Answer 2

它不会“淡化”，但它会显示新的背景图像并隐藏微调器（你可能仍然可以放入一个范围并在load（）回调中淡出。这段代码是根据我发现的东西改编的在这里： http ： //jqueryfordesigners.com/image-loading/

在你的css中，有一个body的规则，一个将显示微调器的规则，以及你可以稍后添加实际设置背景图像的规则：

 body.image-loading {background-image: url('images/spinner.gif'); } body.image-loaded { background-image: url('images/bg.jpg'); } 

然后在jQuery中：

 $(function() { $('body').addClass('image-loading'); var img = new Image(); $(img).load(function () { $(this).hide(); $('body').removeClass('image-loading') .addClass('image-loaded'); }) .attr('src', 'images/bg.jpg');; }); 

Answer 3

没有花费大量时间来剖析它，不会display:none span.loader上没有这样做吗？ 如果删除它会怎么样？