Single Image JQuery Preloader

Я использую довольно большое фоновое изображение на веб-сайте, который я разрабатываю. В настоящее время цвет фона загружается, и когда изображение загружается, оно затем загружается. Это прекрасно; Однако я пытаюсь добиться эффекта, когда прелоадер GIF не раскручивает до фоновых изображений нагрузок, а затем затухает в. В настоящее время здесь мой Jquery (который Isnt работает на всех)Single Image JQuery Preloader

$(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;}

источник

2011-03-05 JCHASE11

Что делать, если у вас был размер DIV размера тела, установленный на цвет фона с помощью счетчика (а не на теле), затем просто добавил фон тела и медленно увеличил прозрачность DIV до тех пор, пока он не станет полностью прозрачным, а затем удалит Это. Вам нужно будет установить z-индекс этого DIV выше, чем тело, но ниже, чем содержание на странице.

Тогда вы можете использовать трюк @ 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-05 19:40:36 tvanfosson

Мне очень нравится эта идея ... однако раскрытие div-класса, похоже, не оживляет обратную сторону непрозрачности 0, потому что тело не было назначено классом «загружено». Любая причина, почему класс не добавляется? – JCHASE11

Почему бы просто не сделать fadeOut (function() {$ (this) .remove()}); Вместо? – Groovetrain

Да, не проблема, но фоновое изображение даже не загружается, потому что телу не присваивается класс загружаемого ... если у вас нет идей, я стану jsfiddle вместе – JCHASE11

Не тратя много времени рассекает его, будет не display:none на span.loader делать именно это? Что произойдет, если вы удалите это?

источник

2011-03-05 19:17:52 Steve

Он не будет «исчезать», но он покажет новое фоновое изображение и спрячет прядильщик (который вы, вероятно, все еще можете поместить в промежуток и исчезнуть в обратном вызове 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-05 19:24:18 Groovetrain

Вам необходимо установить изображение src на URL-адрес фонового изображения в какой-либо момент или событие загрузки не будет срабатывать. – tvanfosson

@tvanfosson справа. Editied. Благодаря! – Groovetrain

Single Image JQuery Preloader

ответ

Смежные вопросы