Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.04.2011, 22:06
Новичок на форуме
Отправить личное сообщение для sanek.me Посмотреть профиль Найти все сообщения от sanek.me
 
Регистрация: 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 документа еще сформирован, то есть пока идет загрузка страницы?
Ответить с цитированием
  #2 (permalink)  
Старый 04.04.2011, 22:19
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

прошу сюда

плагин для jquery
Ответить с цитированием
  #3 (permalink)  
Старый 04.04.2011, 22:50
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,036

Имхо, дуратский эффект. И что его везде пихают. =\
__________________
29375, 35
Ответить с цитированием
  #4 (permalink)  
Старый 04.04.2011, 22:55
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

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

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

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

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


....

по крайней мере, загрузка картинок в network в файрбаге мне говорит о том, что загружаются все картинки,как обычно
Ответить с цитированием
  #5 (permalink)  
Старый 05.04.2011, 00:07
Новичок на форуме
Отправить личное сообщение для sanek.me Посмотреть профиль Найти все сообщения от sanek.me
 
Регистрация: 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 попал в поле видимости.
Как мне узнать что это событие произошло?
Ответить с цитированием
  #6 (permalink)  
Старый 05.04.2011, 15:37
Новичок на форуме
Отправить личное сообщение для sanek.me Посмотреть профиль Найти все сообщения от sanek.me
 
Регистрация: 04.04.2011
Сообщений: 4

Часть ответа на вопрос тут:
http://ruseller.com/lessons.php?rub=37&id=613
Ответить с цитированием
  #7 (permalink)  
Старый 05.04.2011, 17:03
Профессор
Отправить личное сообщение для da_ff Посмотреть профиль Найти все сообщения от da_ff
 
Регистрация: 12.05.2009
Сообщений: 317

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

Другой вариант, засунь блок js-кода перед закрывающим тегом body (можно быть уверенным, что к моменту выполнения этого блока dom-дерево готово), в котором сперка скопируешь значения аттрибута src в свой аттрибут, а картинкой назначь пустую гифку, а дальше понятно. Таким образом посетители без js увидять все картинки,а людям со включенным js картинки будут подгружаться по мере необходимости.
Ответить с цитированием
  #8 (permalink)  
Старый 05.04.2011, 23:03
Новичок на форуме
Отправить личное сообщение для sanek.me Посмотреть профиль Найти все сообщения от sanek.me
 
Регистрация: 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.
Ответить с цитированием
  #9 (permalink)  
Старый 06.07.2011, 01:14
Кандидат Javascript-наук
Отправить личное сообщение для TicTac Посмотреть профиль Найти все сообщения от TicTac
 
Регистрация: 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!
есть ли подобные аналоги?, чтобы загружались картинки только те которые видны без скрола
Ответить с цитированием
  #10 (permalink)  
Старый 07.07.2011, 00:04
Кандидат Javascript-наук
Отправить личное сообщение для TicTac Посмотреть профиль Найти все сообщения от TicTac
 
Регистрация: 07.09.2010
Сообщений: 133

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как организовать RichEdit arma Элементы интерфейса 2 18.02.2010 14:57
О наследовании событий, или как корректно его отменить. JCShen Events/DOM/Window 8 09.02.2010 00:00
Как реализовать вывод такого окна nastya Events/DOM/Window 4 04.02.2010 05:41
Как сделать электронный каталог продукции? natarius Серверные языки и технологии 6 24.05.2009 20:56
эффект ленты HelpeR Общие вопросы Javascript 8 08.01.2009 11:41