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

StackOverflow https://stackoverflow.com/questions/51352

  •  09-06-2019
  •  | 
  •  

Вопрос

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

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

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

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

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

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

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

Хорошее предложение, которое у меня было, - использовать следующее

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

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

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

Это было полезно?

Решение

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

Другие советы

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

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

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

Видеть: http://api.jquery.com/load-event/

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

Поместите элемент div, содержащий счетчик, над изображением диаграммы, при этом для его атрибута CSS display установлено значение 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";
}

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

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

например

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top