Lazy Loading на самом деле не совсем Lazy

На сайте подключена библиотека для ленивой загрузки изображений (Lazy Loading).
Таких js-библиотек достаточное количество на github-е. Вот одна из популярных.
Как правило, для задействования либы требуется:
a) — наличие у тега img определенного класса
b) — наличие у тега img атрибута data-original (или data-src) c указанием ссылки на изображения.
Примерно так:
<img data-original="site.com/uploads/.../img.jpg"/>

Атрибут src может быть не задан вовсе, либо в нем должна быть ссылка на «заглушку».
Чтобы не «ковырять» редактор и/или текстовый парсер было решено сделать в js так:
$('#content .topic-type-topic img').each(function () {
    $(this).addClass('lazy');
    $(this).attr('data-original', $(this).attr('src'));
    $(this).removeAttr('src');
});

$("img.lazy").lazyload({
    effect: "fadeIn"
});

После этого все работает, картинки подгружаются при скролле, по крайней мере визуально.

Недавно заглянул в консоль и увидел, что картинки при загрузке страницы все равно загружаются все разом, а эффект ленивой подгрузки лишь визуальный, т.к. никакой экономии трафика не происходит. Причина загрузки всех изображений в том, что обработка атрибутов тега img происходит ПОСЛЕ загрузки дерева DOM, в частности после загрузки всех картинок и jQuery.

В идеале конечно обработать img в самом движке — добавить правила Jevix, подправить редактор и/или текстовый парсер, затем все имеющиеся топики прогнать через все это.
Можно ли обработать тег img на лету до загрузки страницы? (через модуль Viewer?)

Гугл предложил еще вариант — заменить js-обработку тега img с jQuery на чистый JavaScript и вставить её в head. Кто знает как это сделать — прошу помочь, а я протестирую этот вариант.

Lazyload своими руками

Перед редактированием файлов сделайте backup! ВСЕ МАНИПУЛЯЦИИ ВЫ ДЕЛАЕТЕ НА СВОЙ СТРАХ И РИСК! И сразу говорю, что данный скрипт работает не на всех шаблонах. Допустим, на шаблоне maxone не будет работать корректно (там js косячит). А вот на synio прекрасно будет работать.

Читать дальше →