как обрабатывать событие onLoad для тега img и другие

Question

как обрабатывать onLoad событие в теге img?

пример:

$ ('img'). onload (function (e) {
   alert ('image loaded' + $ (this), attr ('src'));
})

похоже на imageLoader

и другие теги, такие как скрипт, ссылка и т. Д....

Answer 1

jQuery обратный вызов при загрузке изображения (даже когда изображение кэшируется)

$("img").one('load', function() {
  // do stuff
}).each(function() {
  if(this.complete) $(this).load();
});

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

Answer 2

Пример того, как это сделать, можно найти на странице документации jQuery для .load () .

.

HTML:

<img src="book.png" alt="Book" id="book" />

Javascript:

$('#book').load(function() {
  // Handler for .load() called.
});

И на этой странице jQuery тоже есть куча предостережений, на которые стоит обратить внимание.

В случае изображений, если вы хотите убедиться, что обработчик загрузки вызывается, обработчик загрузки должен быть установлен до того, как изображение может быть загружено. Если вы создаете изображение в коде, это означает, что вы должны установить обработчик загрузки, прежде чем устанавливать атрибут .src. Это связано с тем, что в некоторых браузерах, если изображение находится в кэш-памяти / на диске, оно будет загружаться сразу после назначения .src, а если впоследствии вы установите обработчик .load(), вы опоздаете (изображение уже будет загружаться), и обработчик .load() никогда не будет вызван.

Я не знаю, как гарантировать, что на основе jQuery .load () всегда вызывается для изображения, которое находится в HTML вашей страницы, потому что вы не можете назначить обработчик события, пока объект не существует, но как только объект его может быть уже загружен. Вы можете использовать не-jQuery настройку onload = xxx в реальном HTML, хотя это более старый стиль кодирования. Конечно, вы всегда можете подключить window.onload, чтобы узнать, когда были загружены все изображения страниц (и другие ресурсы).

Answer 3

jQuery имеет метод load , а не onload .И ваш код, вероятно, должен быть:

$ ('img').load(function () {
   alert('image loaded ' + this.src);
})