Как показать счетчик при загрузке изображения через JavaScript

поместите счетчик в div того же размера, что и диаграмма, вы знаете высоту и ширину, поэтому вы можете использовать относительное позиционирование для правильного центрирования.

Используйте мощь функции setTimeout () (Больше информации) - это позволяет вам установить таймер для запуска вызова функции в будущем и вызвать его не будет, блокирующее выполнение текущей / других функций (асинхронно).

Поместите div, содержащий счетчик, над изображением диаграммы, установив для него атрибут отображения css значение none:

<div>&nbsp;<img src = "spinner.gif" id = "spinnerImg" style = "display: none;" /></div>

Nbsp останавливает сворачивание div, когда счетчик скрыт. Без него, когда вы переключаете отображение счетчика, ваш макет будет "дергаться"

function chartOnClick() {
  //How long to show the spinner for in ms (eg 3 seconds)
  var spinnerShowTime = 3000

  //Show the spinner
  document.getElementById('spinnerImg').style.display = "";

  //Change the chart src
  document.getElementById('chart').src = '/charts/10.png';

  //Set the timeout on the spinner
  setTimeout("hideSpinner()", spinnerShowTime);
}

function hideSpinner() {
  document.getElementById('spinnerImg').style.display = "none";
}

Решение @iAn мне нравится. Единственное, что я бы изменил, - это вместо использования setTimeout я бы попытался подключиться к событию «Load» изображений. Таким образом, если изображение загружается дольше 3 секунд, вы все равно получите счетчик.

С другой стороны, если загрузка занимает меньше времени, вы получите счетчик менее чем на 3 секунды.

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

function PreloadImage(imgSrc, callback){
  var objImagePreloader = new Image();

  objImagePreloader.src = imgSrc;
  if (objImagePreloader.complete){
    callback();
    objImagePreloader.onload=function(){};
  }
  else{
    objImagePreloader.onload = function() {
      callback();
      //    clear onLoad, IE behaves irratically with animated gifs otherwise
      objImagePreloader.onload=function(){};
    }
  }
}

Вы можете показать статическое изображение, которое дает оптическая иллюзия прялки, как эти.

Помимо опции lowsrc, я также использовал background-image в контейнере img.

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

Затем при загрузке нового большого изображения сначала установите src на предварительно загруженный прозрачный gif размером 1 пиксель.

например

document.getElementById('mainimg').src = '/images/1pix.gif';
document.getElementById('mainimg').src = '/images/large_image.jpg';

Во время загрузки large_image.jpg фон будет отображаться через прозрачный gif размером 1 пиксель.

Я бы добавил несколько случайных цифр, чтобы избежать кеширования браузера.

Основываясь на ответе Эда, я бы предпочел увидеть что-то вроде:

function PreLoadImage( srcURL, callback, errorCallback ) {
     var thePic = new Image();

     thePic.onload = function() {
          callback();
          thePic.onload = function(){};
     }

     thePic.onerror = function() {
          errorCallback();
     }
     thePic.src = srcURL;
}

Ваш обратный вызов может отображать изображение в нужном месте и избавляться от / скрывать счетчик, а errorCallback предотвращает "раскачивание" вашей страницы. Все события управляются, без таймеров или опросов, плюс вам не нужно добавлять дополнительные операторы if, чтобы проверить, завершила ли загрузка изображения, пока вы настраиваете свои события - поскольку они настроены заранее, они будут запускаться независимо от того, как быстро загружаются изображения.

Имейте в виду, что функция обратного вызова также вызывается, если изображение src не существует (ошибка http 404). Чтобы избежать этого, вы можете проверить ширину изображения, например:

if (this.width == 0) return false;

Используя метод нагрузка() для jQuery, легко можно что-то сделать, как только изображение загружено:

$('img.example').load(function() {
  $('#spinner').fadeOut();
});

См .: http://api.jquery.com/load-event/

Мне нравится метод jquery @ duddle, но я обнаружил, что load () не всегда вызывается (например, когда изображение извлекается из кеша в IE). Вместо этого я использую эту версию:

$('img.example').one('load', function() {
  $('#spinner').remove();
}).each(function() {
  if (this.complete) {
    $(this).trigger('load');
  }
});

Это вызывает load не более одного раза и сразу же, если загрузка уже завершена.

Некоторое время назад я написал плагин jQuery, который автоматически обрабатывает отображение счетчика http://denysonique.github.com/imgPreload/

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