jquery - 单图像 Jquery 预加载器

Question

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

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

这不是我想要的 - 我希望背景颜色在加载时显示并在 span.loader 中显示加载程序。当 body 的背景图像完成加载时，我希望它淡入(在加载器顶部，或隐藏加载器)。有任何想法吗？下面是我的基本 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

它不会“淡出”，但它会显示新的背景图像并隐藏微调器(您可能仍然可以将其放入 span 并在此处的 load() 回调中淡出。此代码改编 self 在这里为您找到的东西: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');;
});