Проанализировал код lazy плагина и выделил часть отвечающую за прорисовку.
Реализованно хитро и совсем не гибко.
<img id="img1" data-original="img/2.jpg" src="img/loader.gif" >
Есть картинка с изначальной img/loader.gif и пока img/2.jpg не загрузится и не прорисуется она не сменит img/loader.gif.
$(document).ready(function () {
var $self = $('#img1');
$self.one("appear", function () {
var original = $self.data('original');
$("<img />")
.bind("load", function () {
$self.attr("src", original);
})
.attr("src", original);
}).trigger("appear");
});
Надо заметить что работает так как мне нужно, но я не могу отловить момент когда происходит смена картинки.
Я бы хотел добавить стиль к загруженной картинке. (например width:100%
Но так не получается стиль применяется раньше и раздувает img/loader.gif.
Подскажите как отловить событие смены картинок и если можно немного пояснните как загружается изображение.