JQuery Preloader для одного изображения - PullRequest
Новая
       21

JQuery Preloader для одного изображения

1 голос
/ 05 марта 2011

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

Ответы [ 3 ]

2 голосов
/ 05 марта 2011

Он не «исчезнет», но покажет новое фоновое изображение и скроет спиннер (который вы, вероятно, все еще можете поместить в span и затемнить в обратном вызове 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');;
});
0 голосов
/ 05 марта 2011

Что, если у вас был DIV размера тела, установленный на цвет фона с помощью счетчика (а не на теле), затем просто добавили фон тела и медленно увеличивали прозрачность DIV, пока он не стал полностью прозрачным, а затем удалили его,Вы должны установить z-index этого 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>
0 голосов
/ 05 марта 2011

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...