JQuery показать загрузку Div для каждого эскиза, пока не загружен

Question

У меня есть страница с 50 миниатюрами, которые загружаются при входе пользователя на сайт.

Я смотрю на создание loading... div или, возможно, использую анимированный GIF-файл, чтобы показать, что уменьшенное изображение все еще загружается, а затем переключиться на изображение после загрузки.

Какой наилучший вариант использовать, чистый JS или jQuery, и как можно подойти к чему-то подобному?

Заранее спасибо

Answer 1

эскизы получили фиксированную ширину и высоту?

ну, вот идея, как это сделать ...

var loading = $('<img src="loading.gif" alt="loading" />');
$('#thumbnail').each(function(){
   var loadIMG = loading.clone();
   $(this).after(loadIMG).load(function(){
      $(this).show();
      loadIMG.hide();
   }).hide();
});

ресурсы

• событие загрузки
• .after ()

Answer 2

Вы можете использовать $(window).ready() вместо $(document).ready().Если document срабатывает, когда DOM готов, window срабатывает, когда все элементы готовы.Единственное, что если у вас есть какие-либо внешние файлы, а сервер недоступен, ваш скрипт не будет запускаться.

Answer 3

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

var img = new Image(640, 480); 
img.src = '...';
$(img).bind('load', function() { 
  // Has loaded
});

Возможно, каждое изображение находится в пределах li.Вы можете загрузить страницу с li, имеющими класс loading.Сделайте это с помощью CSS, чтобы он выглядел так, как вы хотите, чтобы был бит загрузки.Привязать к load событиям изображений и в обратном вызове удалить класс loading из родительского li.

Answer 4

Вы можете использовать чистый javascript, чтобы избежать накладных расходов библиотеки jQuery. Но если вы уже используете его на своем сайте, то почему бы не использовать его.