1

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

3 回答 3

2

它不会“褪色”，但会显示新的背景图像并隐藏微调器（您可能仍然可以在此处放入一个跨度并在 load() 回调中淡出。这段代码改编自我发现的内容在这里为您服务：http: //jqueryfordesigners.com/image-loading/

在您的 css 中，为主体设置一个规则，该规则将显示微调器，并且您可以稍后添加该规则以实际设置背景图像：

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');;
});
于 2011-03-05T19:24:18.210 回答
0

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

于 2011-03-05T19:17:52.213 回答
0

如果您使用微调器（而不是在身体上）将身体大小的 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>
于 2011-03-05T19:40:36.823 回答