单图像 Jquery 预加载器

发布于 2024-10-20 05:27:59 字数 704 浏览 2 评论 0原文

我正在开发的网站上使用相当大的背景图像。目前，背景颜色会加载，当图像加载完成后，它就会加载。那完全没问题；然而，我试图实现预加载器 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;}

原文

I am using a fairly large background image on a website I am developing. Currently, the background color loads, and when the image is done loading, it then loads. That is perfectly fine; however, I am trying to achieve an effect where a preloader gif spins until the background image loads, and then fades in. Currently here is my Jquery (which isnt working at all)

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

This isnt doing what I want - I want the background color to show on load and display a loader within span.loader. When the background image of body is done loading, I want it to fade in (either on top of the loader, or hiding the loader). Any ideas? Below is my basic 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;}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦年海沫深 2024-10-27 05:27:59

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

It won't 'fade', but it will show the new background-image and hide the spinner (which you can probably still put in a span and fade out in the load() callback here. This code was adapted from something I found for you here: http://jqueryfordesigners.com/image-loading/

In your css, have a rules for the body, one that will show the spinner, and that you can add later that will actually set the background image:

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

Then in 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');;
});

回复收藏 0 原文

掌心的温暖 2024-10-27 05:27:59

如果您使用微调器将身体大小的 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"> </span>
</div>
<div id="#content">
...
</div>
</body>

What if you had a body-sized DIV set to the background color with the spinner (instead of on the body), then simply added the body background and slowly increased the transparency of the DIV until it's completely transparent, then removed it. You'd have to set the z-index of this DIV higher than the body, but lower than the content on the page.

Then you could use @Groovetrain's trick of checking that the image is loaded to trigger the reveal.

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"> </span>
</div>
<div id="#content">
...
</div>
</body>

回复收藏 0 原文