Как реализовать эффект lazyload

[sanek.me]

Добрый вечер!

Ребят, столкнулся с необходимостью реализовать эффект lazyload.

Пример на нигме.рф (http://info.nigma.ru/index.php?page=avtozapolnenie)

Суть состоит в том, что по мере прокрутки страницы - загружаются картинки. Если пользователь не пролистал страницу вниз, то нижние картинки не загрузились.

Вопрос в том, как это реализовать (без jQuery).

Необходим только сам принцип.

По идее вся разгадка тут (http://info.nigma.ru/temnigma/js/jquery.lazyload.js)

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

Но в этом случае, как убрать атрибут у картинок, если DOM документа еще сформирован, то есть пока идет загрузка страницы?

[melky]

прошу сюда

плагин для jquery

[Aetae]

Имхо, дуратский эффект. И что его везде пихают. =\

[melky]

по-моему у него такой механизм

на каждую картинку вешается событие по её загрузке ( $(img).load() ), обработчик которого её (картинку) скрывает ( $.fadeOut() )

а потом, когда прокрутка странице равна чему-то ( img.offset + 100500/Math.random()*<фаза луны> ..короче,какому-то числу, которое формируется из текущего window.scrolltop и img.offset.top )

так вот. когда прокрутка равна чему-то, фартинка появляется ( $.fadeIn() )


....

по крайней мере, загрузка картинок в network в файрбаге мне говорит о том, что загружаются все картинки,как обычно

[sanek.me]

по-моему у него такой механизм

на каждую картинку вешается событие по её загрузке ( $(img).load() ), обработчик которого её (картинку) скрывает ( $.fadeOut() )

а потом, когда прокрутка странице равна чему-то ( img.offset + 100500/Math.random()*<фаза луны> ..короче,какому-то числу, которое формируется из текущего window.scrolltop и img.offset.top )

так вот. когда прокрутка равна чему-то, фартинка появляется ( $.fadeIn() )


....

по крайней мере, загрузка картинок в network в файрбаге мне говорит о том, что загружаются все картинки,как обычно

То есть ты имеешь ввиду, что картинка все таки загружается, но после загрузки сразу прячется.

Передо мной стоит следующая задачка:
Есть некая страница, на которой порядка 100 картинок. Мне нужно сделать так, чтобы они загружались только по мере того, как прокручивается страница. Не всем пользователям нужны 100 картинок, кому то достаточно посмотреть первые 5, кому то 20. Да и нагрузка на сервер очень высокая из за большого количества загрузок.
Что можете посоветовать?

И еще один вопросик, какое событие регистрирует появление объекта на экране?
К примеру человек прокрутил до <div id="div_25"></div>, т. е. div попал в поле видимости.
Как мне узнать что это событие произошло?

[sanek.me]

Часть ответа на вопрос тут:
http://ruseller.com/lessons.php?rub=37&id=613

[da_ff]

При формировании странички на сервере засовывай путь к картинке тегу img не в src, а data-src (например), а в src задавай пустую гифку (придется задавать размеры картинок вручную). По событию scroll проверяй какие картинки (картинки, к которым требуется применять этот эффект пометь предварительно каким-нибудь классом) попадают в видимую область экрана и копируй значение в аттрибут src, а data-src удаляй. Однако, при этом люди с отключенным js не увидят картинок.

Другой вариант, засунь блок js-кода перед закрывающим тегом body (можно быть уверенным, что к моменту выполнения этого блока dom-дерево готово), в котором сперка скопируешь значения аттрибута src в свой аттрибут, а картинкой назначь пустую гифку, а дальше понятно. Таким образом посетители без js увидять все картинки,а людям со включенным js картинки будут подгружаться по мере необходимости.

[sanek.me]

При формировании странички на сервере засовывай путь к картинке тегу img не в src, а data-src (например), а в src задавай пустую гифку (придется задавать размеры картинок вручную). По событию scroll проверяй какие картинки (картинки, к которым требуется применять этот эффект пометь предварительно каким-нибудь классом) попадают в видимую область экрана и копируй значение в аттрибут src, а data-src удаляй. Однако, при этом люди с отключенным js не увидят картинок.

Другой вариант, засунь блок js-кода перед закрывающим тегом body (можно быть уверенным, что к моменту выполнения этого блока dom-дерево готово), в котором сперка скопируешь значения аттрибута src в свой аттрибут, а картинкой назначь пустую гифку, а дальше понятно. Таким образом посетители без js увидять все картинки,а людям со включенным js картинки будут подгружаться по мере необходимости.

Первый вариант не могу использовать, поскольку пользователи без js (поисковые роботы) должны тоже видеть картинки.


По второму варианту:

Вставляю этот код перед закрывающим тегом </body>

(function()
	{		
		var imgs = document.getElementsByTagName('img');

		if (!imgs)
			return;		

		for (var i = 0; i < imgs.length; i++)
			imgs[i].src = '/images/loading.gif';
	})();

Проблема в том, что картинки все равно загружаются, а после того, как загрузятся меняются на картинку loading.gif. Смена src не останавливает загрузку основной картинки. Картинка загружается, а потом меняется src на loading.gif.

[TicTac]

хм, на http://www.appelsiini.net/projects/lazyload

Lazy Load is currently not usable. It does not work with the latest browsers as expected. I have currently no time updating the code myself. Patches are always welcome. If you find a solution just fork and send a pull request. Thanks!

есть ли подобные аналоги?, чтобы загружались картинки только те которые видны без скрола

[TicTac]

Нашел как альтернативу, может кому пригодится
imageloader