JQuery загрузки изображения в то время как элементы загружаются

Question

Я ищу какие-нибудь учебники / статьи о вставке загрузочного GIF-файла во время загрузки элементов, я видел его на нескольких сайтах Я могу только найти статьи о предварительной загрузке изображений.

Answer 1

В зависимости от того, что вы пытаетесь сделать, это не особенно сложно. Следующее покажет загрузочное изображение (ранее существовавшее), затем загрузит html, полученный через ajax, а затем, по завершении, скроет загрузочное изображение.

$(function() {
   $('#activate').click( function() {
      $('#loadingImg').show();
      $('#whereItGoes').load( 'url-to-data-to-be-loaded', function() {
          $('#loadingImg').hide();
      });
   });
});

Если данные для загрузки являются изображениями, то это становится немного сложнее, поскольку обратный вызов загрузки может быть вызван до фактической загрузки данных изображения. Одна из стратегий в этом случае состоит в том, чтобы включить в HTML скрипт, который знает, сколько изображений должно быть загружено, и иметь загруженный обработчик событий, который в основном отсчитывает количество изображений, пока все изображения не будут загружены. Я обычно связываю его с таймаутом на тот случай, если загруженный обработчик не будет добавлен до того, как станут доступны данные изображения (в этом случае он не сработает).

Answer 2

Вы можете сгенерировать GIF-файлы загрузчика здесь: http://www.ajaxload.info/

Answer 3

Обычно это не более чем:

function onAGivenEvent() {
    $('someContain').append('<div id="throbber"></div>');
    // do some slowthings with a "on complete callback to onComplete
}

function onComplete() {
    $('#throbber').remove();
}

Но есть также случаи, когда вам даже не нужен Javascript. Например, в случае больших изображений. В этом случае вы можете сделать это, используя HTML и CSS:

img.largeImage {
   background: url(throbber.gif) center no-repeat;
}

и в HTML

<img class="largeImage" src="..." />

Answer 4

Общая стратегия - поместить загрузочное изображение в тег div или span и показать или скрыть его, когда вы хотите показать его. Если вы хотите показать это изначально, просто поместите функцию jQuery .hide () в div или span в jQuery для функции ready.

См. Документы jQuery на show () и hide ()

Answer 5

Существует самый простой способ сделать это без использования Показать или скрыть. Потому что использование show или hide подразумевает, что вы должны создать div где-то внутри, в который вы бы поместили свое загрузочное изображение, которое на самом деле не является необходимым. Это путь

 <a href="mypage.php" rel="charger">Load Page 1</a>

<div id="LoadMe">LoadMe div</div>

<script>


    $('a[rel*=charger]').click(function() {

    $('#LoadMe').html('<img src="images/facebook_style_loader.gif" />');

  $('#LoadMe').load($(this).attr('href'));



  return false;
});




</script>

Как только вы это сделаете, вам НЕ нужно будет добавлять какие-либо другие дополнительные элементы div и использовать css, чтобы скрыть их, потому что вы будете использовать show или hide. А также это заставит загрузочное изображение отображаться именно там, где должны загружаться объекты, но показ и скрытие не всегда могут позволить загрузочному изображению появляться в нужном месте, если на странице есть много материалов, которые вы хотите загрузить , Надеюсь, что это помогло.