单图像 Jquery 预加载器答案

【问题标题】：Single Image Jquery Preloader单图像 Jquery 预加载器
【发布时间】：2011-03-05 19:12:06
【问题描述】：

我正在开发的网站上使用相当大的背景图片。目前，背景颜色加载，当图像加载完成后，它会加载。那很好；但是，我正在尝试实现预加载器 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;}

【问题讨论】：

标签： jquery css image preloading

【解决方案1】：

它不会“淡出”，但会显示新的背景图像并隐藏微调器（您可能仍然可以在此处放入一个跨度并在 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');;
});

【讨论】：

您需要在某个时候将图像 src 设置为背景图像 url，否则加载事件不会触发。

【解决方案2】：

如果您使用微调器（而不是在身体上）将身体大小的 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 }

<script type="text/javascript">
    $(function() {
       var img = new Image();
       $(img).hide().load(function() {
           $('body').addClass('loaded');
           $('.reveal').animate({opacity:0}, function() {
               $(this).remove();
           });
       });
       img.src = "/images/bg.jpg";
    });
</script>    

<body>
<div class="reveal">
  <span class="loader">&nbsp;</span>
</div>
<div id="#content">
...
</div>
</body>

【讨论】：

我真的很喜欢这个想法......但是 div 类显示似乎没有动画回到 0 不透明度，因为没有为 body 分配“加载”类。没有添加课程的任何原因？
为什么不做一个fadeOut(function() { $(this).remove() });而是？
是的，没问题，但是背景图像甚至没有被加载，因为 body 没有被分配到加载的类...如果你没有任何想法，我会把一个 jsfiddle 放在一起跨度>
没关系，我搞定了，问题是在这里写完整路径：img.src = "/images/bg.jpg";非常感谢你们！
@Groovetrain - fadeOut 也设置了 display: none，如果我只是要删除它，何必麻烦呢？

【解决方案3】：

如果不花很多时间剖析它，span.loader 上的display:none 不就可以做到这一点吗？如果删除它会发生什么？

【讨论】：