ПРИМЕЧАНИЕ: Я написал это в 2010 году, браузерами в дикой природе были IE 8/9 beta, Firefox 3.x и Chrome 4.x. Пожалуйста, используйте это только для исследовательских целей, я сомневаюсь, что вы можете скопировать / вставить это в современный браузер и заставить его работать без проблем.
ПРЕДУПРЕЖДЕНИЕ: Сейчас 2017 год, я все еще получаю очки по этому вопросу время от времени, пожалуйста, используйте это только в исследовательских целях. В настоящее время я понятия не имею, как определить состояние загрузки изображения, но, вероятно, есть гораздо более изящные способы сделать это, чем это ... по крайней мере, я серьезно надеюсь, что есть. Я настоятельно рекомендую НЕ использовать мой код в производственной среде без дополнительных исследований.
Я немного опоздал на эту вечеринку, может быть, этот ответ поможет кому-то еще ...
Если вы используете jQuery, не беспокойтесь о обработчиках стандартных событий (onclick / onmouseover / etc), фактически просто прекратите их использование. Используйте методы событий, которые они предоставили в своем API .
Это предупредит, прежде чем изображение будет добавлено к телу, потому что событие загрузки запускается, когда изображение загружается в память. Он делает именно то, что вам говорят: создайте изображение с помощью теста test.jpg, когда test.jpg загрузит предупреждение, затем добавьте его к телу.
var img = $('<img src="test.jpg" />');
img.load(function() {
alert('Image Loaded');
});
$('body').append(img);
Это предупредит после вставки изображения в тело, снова делая то, что вы ему сказали: создайте изображение, установите событие (src не установлено, поэтому оно не загружено), добавьте изображение к body (все еще нет src), теперь установите src ... теперь изображение загружено, поэтому событие инициируется.
var img = $('<img />');
img.load(function() {
alert('Image Loaded');
});
$('body').append(img);
$img.attr('src','test.jpg');
Конечно, вы также можете добавить обработчик ошибок и объединить несколько событий, используя bind ().
var img = $('<img />');
img.bind({
load: function() {
alert('Image loaded.');
},
error: function() {
alert('Error thrown, image didn\'t load, probably a 404.');
}
});
$('body').append(img);
img.attr('src','test.jpg');
По запросу @ChrisKempen ...
Вот не управляемый событиями способ определения, не повреждены ли изображения после загрузки DOM. Этот код является производным кода от статьи StereoChrome , которая использует атрибуты naturalWidth, naturalHeight и complete, чтобы определить, существует ли изображение.
$('img').each(function() {
if (this.naturalWidth === 0 || this.naturalHeight === 0 || this.complete === false) {
alert('broken image');
}
});