Предварительный загрузчик Jquery для одного изображения

Я использую довольно большое фоновое изображение на веб-сайте, который я разрабатываю. В настоящее время загружается цвет фона, и когда изображение загружается, оно загружается. Это прекрасно; тем не менее, я пытаюсь добиться эффекта, при котором предварительный загрузчик 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;}

image jquery css preloading
person JCHASE11    schedule 05.03.2011    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Что, если бы у вас был 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>
person tvanfosson    schedule 05.03.2011
comment
Мне очень нравится эта идея... однако раскрытие класса div, похоже, не анимируется обратно к непрозрачности 0, потому что тело не было назначено с загруженным классом. Любая причина, по которой класс не добавляется? - person JCHASE11; 05.03.2011
comment
Почему бы просто не сделать fadeOut(function() { $(this).remove() }); Вместо? - person Groovetrain; 05.03.2011
comment
да, не проблема, но фоновое изображение даже не загружается, потому что телу не присваивается класс загруженного... если у вас нет идей, я соберу jsfiddle - person JCHASE11; 05.03.2011
comment
неважно, у меня все заработало, проблема заключалась в том, чтобы написать полный путь сюда: img.src = /images/bg.jpg; БОЛЬШОЕ СПАСИБО ВАМ ОБОИМ! - person JCHASE11; 05.03.2011
comment
@Groovetrain - fadeOut также устанавливает display: none, зачем беспокоиться, если я просто собираюсь удалить его? - person tvanfosson; 05.03.2011
comment
Я просто установил: $('.reveal').fadeOut(1000); это очень изящно - person JCHASE11; 05.03.2011
comment
@tvanfosson Это хороший момент. Я часто использовал fadeOut() вместо animate('opacity', 0), потому что это позволяло jQuery обрабатывать браузеры, которым не нравилось свойство opacity. Есть ли причина, по которой вы можете подумать об использовании одного над другим? ... Что касается его удаления, это просто немного почистить DOM. :) - person Groovetrain; 05.03.2011
comment
@Groovetrain - я думаю, я предполагал, что метод анимации уже обрабатывал различия браузера для непрозрачности, и что fadeOut на самом деле был просто удобством для непрозрачности до 0 и, наконец, display: none; В любом случае для меня не имеет значения, какой из них используется, если они оба работают. - person tvanfosson; 05.03.2011

arrow_upward
2
arrow_downward

Он не будет «исчезать», но он покажет новое фоновое изображение и скроет счетчик (который вы, вероятно, все еще можете поместить в диапазон и исчезнуть в обратном вызове 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');;
});
person Groovetrain    schedule 05.03.2011
comment
В какой-то момент вам нужно установить в качестве источника изображения URL-адрес фонового изображения, иначе событие загрузки не сработает. - person tvanfosson; 05.03.2011

arrow_upward
0
arrow_downward

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

person Steve    schedule 05.03.2011