jQuery: Как мне загрузить отображение загружаемой графики до того, как большое фоновое изображение, установленное в css, загрузится и затем исчезнет фоновое изображение? - PullRequest
Новая
       18

jQuery: Как мне загрузить отображение загружаемой графики до того, как большое фоновое изображение, установленное в css, загрузится и затем исчезнет фоновое изображение?

2 голосов
/ 22 декабря 2010

Я переделываю свой личный веб-сайт, и у меня есть полноразмерное изображение, которое я использую в качестве фона сайта.Загрузка занимает намного больше времени, чем остальная часть веб-страницы, и я больше не могу уменьшить размер файла, поэтому ...
Используя jQuery, я хотел отображать анимированный GIF-загрузку в фоновом режиме, пока изображение не загрузится, а затем не исчезнет в.
У меня есть следующий код jQuery, который красиво затеняет изображение: 

$(document).ready(function(){ 
   $('#bodybg').fadeIn(2000);
});

И я хотел подумать о добавлении класса к идентификатору css, а затем назначить загрузочное изображение для класса и иметь jQuery.раздеть класс после загрузки изображения.что-то вроде: 

$('#bodybg') .removeClass('loading')

Но я немного застрял в том, чтобы поместить его в формат, который работает?Кто-нибудь может помочь?

Ответы [ 3 ]

0 голосов
/ 22 декабря 2010 
$(window).load(function() {
    jQuery('#bodybg').fadeIn();
});

Или вы можете загрузить с белым экраном и исчезнуть на сайте:

css: 

div#loading { position: absolute; top:0px ; bottom: 0px; left: 0px; right: 0px; background-color: white; z-index: 1000;}

и Jquery 

$(window).load(function() {
    jQuery('#loading').fadeOut();
});

иHTML (сразу после тега body) 

<div id="loading"></div>
0 голосов
/ 22 декабря 2010

Хорошо, спасибо за это, ребята.Оба ваших вклада помогли.Мне удалось заставить gif загрузчика отображаться, затем исчезать и изображение исчезать после загрузки.Теперь у меня есть приятный эффект, который указывает пользователю, что страница загружается и красиво исчезает.

HTML - это ... 

<div class=loading style="display:none;"></div>

, помещенный сразу после тега body затем ...

<div class="bodybg"></div>

помещено сразу после этого.

JQuery ... 

$(document).ready(function(){
    jQuery('#loading').fadeOut(8000);});
$(document).ready(function(){   
    jQuery('#bodybg').fadeIn(3000)});

У меня основное содержание страницы сразу исчезает со скоростьюиз 3000, так что это действительно все хорошо работает вместе.

CSS для установки ... 

#bodybg { width: 100%; height: 100%; background: url(../images/body/mainbg.jpg) no-repeat fixed center 0 transparent; position: absolute; z-index: 0; }

#loading { width: 100%; height: 100%; background: url(../images/body/ajax-loader.gif) no-repeat fixed center 100px; position: absolute; z-index:-1;}

Когда веб-страница впервые загружается в браузер, фон белый с логотипом и содержимымсайта видно сразу.Чуть выше основного содержимого gif загрузчика остается анимированным до тех пор, пока фоновое изображение не загружается и не закрывает его, пока оно не затухает менее чем на секунду позже позади фона.

Поскольку фоновое изображение не нужно загружать послепользовательский браузер загружает его, переход на другие страницы кажется плавным, так как gif загрузчика появляется и исчезает, а остальная часть содержимого исчезает.

Помощь и руководство очень ценились.

ЭндиSmiff

0 голосов
/ 22 декабря 2010

Вы можете попытаться добавить функцию обратного вызова в fadeIn. 

$("#bodybg").fadeIn(2000, function(){
  $("#bodybg").removeClass('loading');
})
...