单图像Jquery Preloader
我在我正在开发的网站上使用相当大的背景图像。目前，背景颜色加载，当图像加载完成后，它会加载。那很好;但是，我试图实现一个效果，其中预加载器gif旋转，直到背景图像加载，然后淡入。目前这是我的Jquery（它根本不工作）
$(document).ready(function(){
$('span.loader').show();
$("body").css('background-image','url(images/bg.jpg)').ready(function(){
$("span.loader").hide();
});
});
span.loader
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;}
没有找到相关结果
已邀请:
3 个回复
物崎巩
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>席酱
body.image-loading {background-image: url('images/spinner.gif'); } body.image-loaded { background-image: url('images/bg.jpg'); }$(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');; });徘廷
不会那样做吗？如果删除它会怎么样？