Чтобы отследить момент загрузки картинки одного обработчика события «load » бывает не достаточно. Если он будет прикреплен к картинке после того, как она уже была загружена, то событие больше не повторится и обработчик не будет вызван.
Поможет решить эту проблему вспомогательный плагин к jQuery.
;(function ($) {
$.fn.bindImageLoad = function (callback) {
function isImageLoaded(img) {
// Во время события load IE и другие браузеры правильно
// определяют состояние картинки через атрибут complete.
// Исключение составляют Gecko-based браузеры.
if (!img.complete) {
return false;
}
// Тем не менее, у них есть два очень полезных свойства: naturalWidth и naturalHeight.
// Они дают истинный размер изображения. Если какртинка еще не загрузилась,
// то они должны быть равны нулю.
if (typeof img.naturalWidth !== "undefined" && img.naturalWidth === 0) {
return false;
}
// Картинка загружена.
return true;
}
return this.each(function () {
var ele = $(this);
if (ele.is("img") && $.isFunction(callback)) {
ele.one("load", callback);
if (isImageLoaded(this)) {
ele.trigger("load");
}
}
});
};
})(jQuery);
Обновление: Работу плагина можно посмотреть в примере. Там используется немного модифицированная версия, которая формирует специальное событие.