Изменение события <img src = "XXX" />, js после завершения загрузки нового изображения?

Question

У меня есть веб-страница фотогалереи, где один <img src="XXX" /> элемент src изменяется (по щелчку) с помощью javascript, чтобы показать следующее изображение - я полагаю, ajax бедняка. Прекрасно работает на более быстрых соединениях, когда новое изображение появляется почти сразу. Даже если загрузка занимает несколько секунд, каждый браузер, на котором я его тестировал, сохраняет старое изображение на месте, пока новое полностью не загрузится.

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

Я знаю, что могу использовать AJAX по-настоящему (я уже использую jQuery), но это такое хорошее и простое решение. Помимо этой задержки, есть ли какая-то другая причина, по которой я должен избегать такого подхода к изменению изображений?

спасибо.

Answer 1

Вы можете установить обработчик для события «load».

$('img.whatever')
  .load(function() { /* do stuff */ })
  .attr('src', newURL);

На самом деле, я думаю, вы захотите сделать это с помощью «live ()»:

$('img.reloadable').live('load', function() { $(this).show(); });
// ...
$('img#someId').hide().attr('src', newURL);

edit - Вау, где этот год прошел?Что ж, получается, что одна проблема с этим «живым» подходом, который я набрал в обратном пути, это то, что событие «загрузки» не всплывает .Однако теперь вы можете использовать способ, которым ведут себя объекты «Изображение» (в отличие от <img> элементов DOM).По сути, функция, которая изменяет URL, может использовать элемент «Image» в качестве места для хранения обработчика.Код, который изменяет фактический атрибут "src" тега real <img>, также обновляет "src" экземпляра объекта "Изображение".Браузер действительно загрузит изображение только один раз (при условии, что управление кешем все круто), но браузер все равно вызовет обработчик «загрузки» «Изображение»:

(function() {
  var imageObj = new Image();

  imageObj.onload = function() {
    // code to run when image loads from server 
  };

  $('#hypotheticalButton').click(function() {
    $('#imgToUpdate').attr('src', newURL);
    imageObj.src = newURL;
  });
})();

Answer 2

var slideimg = $('#slideimage');
slideimg.click(function(){
    var img = new Image();
    var url = 'url_to_next_image.jpg';
    $(img).bind('load',function(){
        $('#loading').hide();
        slideimg.attr('src',url);
    }).attr('src',url);
    $('#loading').show();
});

Это должно работать даже при сумасшедшей обработке кэша в IE.

Answer 3

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

http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript