04.04.2011, 22:06
|
Новичок на форуме
|
|
Регистрация: 04.04.2011
Сообщений: 4
|
|
Как реализовать эффект lazyload
Добрый вечер!
Ребят, столкнулся с необходимостью реализовать эффект lazyload.
Пример на нигме.рф ( http://info.nigma.ru/index.php?page=avtozapolnenie)
Суть состоит в том, что по мере прокрутки страницы - загружаются картинки. Если пользователь не пролистал страницу вниз, то нижние картинки не загрузились.
Вопрос в том, как это реализовать (без jQuery).
Необходим только сам принцип.
По идее вся разгадка тут ( http://info.nigma.ru/temnigma/js/jquery.lazyload.js)
На сколько я понимаю у каждой картинки убираем атрибут src, а при ее появлении в поле видимости назначаем картинке его.
Но в этом случае, как убрать атрибут у картинок, если DOM документа еще сформирован, то есть пока идет загрузка страницы?
|
|
04.04.2011, 22:19
|
sinistral
|
|
Регистрация: 28.03.2011
Сообщений: 5,418
|
|
|
|
04.04.2011, 22:50
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,576
|
|
Имхо, дуратский эффект. И что его везде пихают. =\
__________________
29375, 35
|
|
04.04.2011, 22:55
|
sinistral
|
|
Регистрация: 28.03.2011
Сообщений: 5,418
|
|
по-моему у него такой механизм
на каждую картинку вешается событие по её загрузке ( $(img).load() ), обработчик которого её (картинку) скрывает ( $.fadeOut() )
а потом, когда прокрутка странице равна чему-то ( img.offset + 100500/Math.random()*<фаза луны> ..короче,какому-то числу, которое формируется из текущего window.scrolltop и img.offset.top )
так вот. когда прокрутка равна чему-то, фартинка появляется ( $.fadeIn() )
....
по крайней мере, загрузка картинок в network в файрбаге мне говорит о том, что загружаются все картинки,как обычно
|
|
05.04.2011, 00:07
|
Новичок на форуме
|
|
Регистрация: 04.04.2011
Сообщений: 4
|
|
Сообщение от melky
|
по-моему у него такой механизм
на каждую картинку вешается событие по её загрузке ( $(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 попал в поле видимости.
Как мне узнать что это событие произошло?
|
|
05.04.2011, 15:37
|
Новичок на форуме
|
|
Регистрация: 04.04.2011
Сообщений: 4
|
|
|
|
05.04.2011, 17:03
|
Профессор
|
|
Регистрация: 12.05.2009
Сообщений: 317
|
|
При формировании странички на сервере засовывай путь к картинке тегу img не в src, а data-src (например), а в src задавай пустую гифку (придется задавать размеры картинок вручную). По событию scroll проверяй какие картинки (картинки, к которым требуется применять этот эффект пометь предварительно каким-нибудь классом) попадают в видимую область экрана и копируй значение в аттрибут src, а data-src удаляй. Однако, при этом люди с отключенным js не увидят картинок.
Другой вариант, засунь блок js-кода перед закрывающим тегом body (можно быть уверенным, что к моменту выполнения этого блока dom-дерево готово), в котором сперка скопируешь значения аттрибута src в свой аттрибут, а картинкой назначь пустую гифку, а дальше понятно. Таким образом посетители без js увидять все картинки,а людям со включенным js картинки будут подгружаться по мере необходимости.
|
|
05.04.2011, 23:03
|
Новичок на форуме
|
|
Регистрация: 04.04.2011
Сообщений: 4
|
|
Сообщение от da_ff
|
При формировании странички на сервере засовывай путь к картинке тегу 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.
Последний раз редактировалось sanek.me, 05.04.2011 в 23:12.
|
|
06.07.2011, 01:14
|
Кандидат Javascript-наук
|
|
Регистрация: 07.09.2010
Сообщений: 133
|
|
хм, на 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!
|
есть ли подобные аналоги?, чтобы загружались картинки только те которые видны без скрола
|
|
07.07.2011, 00:04
|
Кандидат Javascript-наук
|
|
Регистрация: 07.09.2010
Сообщений: 133
|
|
Нашел как альтернативу, может кому пригодится
imageloader
|
|
|
|