单图像Jquery预加载器 [英] Single Image Jquery Preloader
问题描述
我正在开发的网站上使用相当大的背景图片。目前，背景颜色加载，当图像加载完成后，它会加载。那很好;但是，我试图实现一个效果，其中预加载器gif旋转，直到背景图像加载，然后淡入。目前这是我的Jquery（它根本不工作）
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();
});
});
这不是我想要的 - 我想要在加载时显示背景颜色并在其中显示加载器 span.loader 。当身体的背景图像完成加载时，我希望它淡入（在加载器顶部或隐藏加载器）。有任何想法吗？以下是我的基本CSS：
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;}
推荐答案
如果你有一个身体怎么办？ -sized DIV使用微调器（而不是在身体上）设置为背景颜色，然后简单地添加身体背景并慢慢增加DIV的透明度，直到它完全透明，然后将其移除。您必须将此DIV的z-index设置为高于正文，但低于页面上的内容。
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.
然后你可以使用@ Groovetrain的技巧来检查图像是否被加载以触发显示。
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>
这篇关于单图像Jquery预加载器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
