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

Question

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

Что я хочу сделать, так это когда щелкают ссылку на странице, просто меняется диаграмма на странице. Это значительно ускорит процесс, поскольку страница имеет размер около 100 КБ, и вам не нужно перезагружать всю страницу только для того, чтобы отобразить это.

Я делал это через JavaScript, который работает до сих пор, используя следующий код

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

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

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

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

Хорошее предложение - использовать следующее

<img src="/charts/10.png" lowsrc="/spinner.gif"/>

Что было бы идеально, за исключением того, что счетчик значительно меньше отображаемой диаграммы.

Есть еще идеи?

Answer 1

Я использовал что-то вроде этого, чтобы предварительно загрузить изображение, а затем автоматически перезвонить моему 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(){};
    }
  }
}

Answer 2

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

Answer 3

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

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

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

Answer 4

Используйте силу функции 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";
}

Answer 5

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

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

Answer 6

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

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, чтобы проверить, завершена ли загрузка изображения, когда вы настраиваете ваши события - так как они настроены заранее, они сработают независимо от того, как быстро загружаются изображения.

Answer 7

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

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

, например

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

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

Answer 8

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

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

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

Answer 9

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

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

Answer 10

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