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

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

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

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

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

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

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

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

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

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

прошу сюда

плагин для jquery

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

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

на каждую картинку вешается событие по её загрузке ( $(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 попал в поле видимости.
Как мне узнать что это событие произошло?

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

При формировании странички на сервере засовывай путь к картинке тегу 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.

хм, на http://www.appelsiini.net/projects/lazyload
есть ли подобные аналоги?, чтобы загружались картинки только те которые видны без скрола

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

Тоже заинтересовала такая система, исключительно для экономии трафика посетителям. И вот какая мысль пришла. Что если для людей без JS тупо поместить картинку внутрь тега <noscript><img src="bigimg.jpg"></noscript>, а для обычных только по скроллу?

sanek.me,
прячем ccылку в атрибут data на картинке - оставляя src - пустым - при подходе экрана к началу предыдущего окна перед загружаемым - (смотрим высоту top/height_экрана заранее имеем массив в скрипте с позицией каждой картинки с координатами в topIMG/height_экрана) - изымаем ссылку из data и помещаем в src

и для браузеров без JS \ гуглопауков нужно выводить картинки в теге <noscript>, не забывайте.

я где-то тут уже писал, как это должно выглядеть ...
http://javascript.ru/forum/195801-post18.html

а гугл боты уже вроде работают со скриптами

они работают с AJAX, и то, эмулируют его. (инфа с 2010 года, примерно)

насчёт обычных скриптов ничего не слышал.

а да точно AJAX

Работают - тут срачь был у мну с постояльцем и ссылка - была ... на гугл- тонкости - гугл всё видит и всё хавает хад

... ну ладно. а Яндекс\другие ?

Собственно нужно гуглить - статья была 10 года - походу упоминание про яшу - что он вслед за гуглом - текущее состояние про Яндекс по статье не было указано

Может загружать уменьшенные картинки (на странице будут в скрытом или открытом виде), по мере прокрутки подгружать увеличенные

Где-то проскользнуло "Старый, не поддерживается..."
http://vremenno.net/js/lazy-load/
Источник https://github.com/tuupola/jquery_lazyload

Была проблема. Погружал в модалке подарки для выбора, имели картинки. Когда блок загружал партию картинок, на блок срабатывал lazy load, все отлично на видимой части, но стоит немного прокрутить скрол внутри модалки, нижние картинки серые... И их можно было увидеть если скрольнуть основной скрол у элемента html, тогда норм. Как только не пытался привязать прогрузку картинок на скрол внутри модалки, так и не получилось. Либо не судьба найти решение. В итоге написал обработчик на onScroll модалки, который вызывает скрол Html блока. onScroll="$('html').scroll()"; Что то типо того, и тода забыл про эту проблему. Но если все таки есть правильное решение, неужели никто не сталкивался?