jQuery Image Loading

[Kyjek]

https://jsfiddle.net/Kyjek/ut4xmk56/5/

изменил на огромное фото http://luxfon.com/images/201505/luxfon.com_35100.jpg
оно очень долго рисуется.

Собсвенное весь код перед глазами. но что он делает я сходу не пойму ))

[Rise]

Kyjek, я тоже не пойму что тебе надо, и у меня нет желания тратить траффик на твои огромные картинки, и угадывать что тебе там привиделось, я пас.

[Kyjek]

Чего же тут не понять. Картинка в примере https://jsfiddle.net/Kyjek/ut4xmk56/5/
отображается сразу полностью. от верха до низа. не полосками (по полсочке). Мне надо понять как. Код есть но сложный. Совственно это все.

трафик в 2017 году. сейчас даже на мобильном безлимитный. Покрайнемере у меня

[Rise]

Kyjek, трафик картинок пишется в кэш, и твои бесполезные огромные картинки могут затереть там массу полезной информации, с полезным кэшом полезные ресурсы грузятся мгновенно и можно работать в оффлайн режиме, например можно нагрузить весь канал передачи данных или отключиться от сети, и без проблемно продолжить серфинг по ранее посещенным страницам, не все в интернете только видосики и картинки смотрят) некоторые еще и читают, 2017 год, а ты всё проспал))

[Kyjek]

Проанализировал код 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.
Подскажите как отловить событие смены картинок и если можно немного пояснните как загружается изображение.

[laimas]

.attr("src", original) - старт загрузки
.bind("load"... - окончание загрузки
$self.one("appear"... определение момента загрузки (прокручено до изображения, "ленивая загрузка")

[Rise]

Открытого Коллбэка нет поэтому меня и не устраивает этот скрипт.

Что значит нет, а это что:

$('img.lazy').lazyload({
	appear: function(remains, settings) {
		// before load
	},
	load: function(remains, settings) {
		// after load
		$(this).css('width', '100%');
	}
});

[Kyjek]

этот колбэк выполняется раньше чем картинка сменится. Т.е. он выполняется по факту загрузки.
Если смотреть код в отладчике, проходя по всем шагам, то можно заметить что все выполнение js заканчивается на этапе замены src. Дальше js ничего не делает, однако на экране у картинки с прописанным src = img ( он подставился туда т.к. load произошел) отображается загрузчик и он сам сменится на картинку как только она прорисуется. Это какая то хитрость на которой основана работа плагина. Меня она полностью устраивает за исключением одного.
Я хочу изменить заглушку загрузки.
Тут она хитрая

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC

Такая короткая по объёму и в тоже время бесконечно длинная картинка в виде квадрата. Что это такое???
В идеале хотелось бы ее с spiner в центре.
но будет достаточно сделать ее не в виде квадрата, а прямоугольник с короткой высотой, т.к. в большинстве случаев картинке задается ширина, а высота автоматически, что делает неудобным применение данной заглушки.

[Rise]

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

Естественно сам сменится и это не великая хитрость, а так и работает свойство image.src, когда ему присваиваешь строку в виде пути к картинке, браузер ее загружает и отображает, поменяешь значение загрузится другая картинка и отобразится и тд. Когда картинка загрузится вызывается событие load, а как быстро браузер тебе ее покажет на экране от скрипта не зависит, а зависит от реализации самого браузера, от производительности твоего компа в данный момент и от размера картинки, тоже самое как производительность в играх падает на слабых компах или когда игра сама по себе плохо оптимизирована, картинка может отрисоваться с задержкой.

Такая короткая по объёму и в тоже время бесконечно длинная картинка в виде квадрата. Что это такое???

Это data:uri картинка в один пиксель, введи ее код в адресную строку и увидишь, ее можно также присваивать в image.src, и она не бесконечно длинная, а просто растянута на установленную ширину и высоту, если заменить обычной картинкой в один пиксель, будет то же самый эффект, разница в том что здесь исходный код картинки хранится непосредственно в файле скрипта, а не на диске, но преобразованная таким образом картинка обычно весит на 30% больше.

[Kyjek]

Хм прикольно, можете подсказать как сделать два пикселя в ряд прозрачных! В base64