Ленивая загрузка изображений проблема с предварительным отображением изображений?

Question

[Alexey]

Коллеги, нужна помощь, "бью в колокола":
Необходимо сделать "ленивую загрузку" изображений, тоесть, что пользователь видит (,...), то и загружается, иначе стоит изображение с загрузкой картинки и после того как загрузилось, замещает предыдущую.
Задача в том чтобы сделать все это с JQuery, посоветовали использовать скрипт Unveil.js, но там предусмотрены такие правила:
Оригинал моего:
<img src="..." alt="...">
Нужно:
<img src="..." data-src="..." alt="...">, где data-src - оригинальное изображение, src - изображение с загрузкой.
Я сделал замену с помощью JQuery:

$("img").not("div.counters img").each(function(){
		var src = $(this).attr("src");
		$(this).attr("data-src", src);
	//	Временное изображение
		$(this).attr("src", "http://www.reverta.lv/images/loading.gif");
	});

И после того как мои теги приходят в надлежащий вид, делаю ленивую загрузку:
$("img").not("div.counters img").unveil(200);
Только перед тем как поменять теги, все оригинальные изображение загружаются/отображаются и затем меняются на изображения с загрузкой -> Unveil().
Вопрос: Как не отображать оригинальные изображения, а сразу менять теги и подключать unveil?

Answer 1

[Юрий Лобанов]

Замену лучше сделать на стороне сервера. Как и где Вы вставляете код замены Вашего кода на тот, что нужен? Может ссылку кинете?

Comments

[Alexey]

Замену на стороне сервера сделать не могу, к сожалению, проблема бы отпала сама собой. Есть ли какие либо решения для данных действий? Чтобы не загружать картинки, а выполнять определенные действия и выдавать уже "готовенькое"?

[Юрий Лобанов]

@azovl я потому и уточнил, как Вы заменяете? Например, если Вы ждете загрузки страницы или DOM, то ничего удивительного )

[Alexey]

Вероятно так и получается, загрузка DOM и после автивность скрипта. Как сделать наоборот?

Answer 2

[Евгений Петров]

По-хорошему, никак.

Максимум, доступный вам — после каждого изображения вставлять скрипт для обработки его кода, и это всё равно не даст гарантий от начала загрузки его содержания.

Но вы же не можете менять код. Следовательно должны дождаться окончания формирования DOM. А если браузер считает, что должен начать загружать изображение до окончания формирования DOM?

В общем, @iiil уже дал верный совет — меняйте код на сервере. Иначе всё равно будет не то, что вы хотели.

Comments

[Alexey]

Приплыли... Даже незнаю что и сказать, задача практически невозможна, насколько я понял средствами, средствами JQuery и Javascript ?!

[Евгений Петров]

Давайте проясним ситуацию. Есть HTML, передаваемый по протоколу http. Браузер его принимает и начинает обработку с помощью встроенного парсера. Результатом обработки однозначно является DOM — структура получившегося документа.

Если в результате обработки парсер выявляет внешние ссылки, то должна последовать реакция. К примеру, если эти ссылки являются атрибутами элементов «link», то браузер автоматически начинает загрузку внешних файлов. А если встречается «script» с атрибутом src и без атрибута async (defer), то работа самого парсера приостанавливается до окончания разбора скрипта (неважно, успешной или нет).

Вопрос — а как поступает браузер с элементами типа «img»? Загружает сразу или ждёт построения DOM? Мне кажется, сразу. И, если я прав, то вы не сможете предотвратить старт загрузки изображений.