Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.01.2014, 11:22
Интересующийся
Отправить личное сообщение для GEN_18 Посмотреть профиль Найти все сообщения от GEN_18
 
Регистрация: 13.04.2011
Сообщений: 18

Загрузка изображений по мере прокрутки сладйера
Есть слайдер фотографий на подобие http://grandreport.ru/reportage/ , где крутится около 300 фотографий.
Чтоб увеличить скорость загрузки сайта, решил применить плагин lazyload.
Но он работает только при вертикальной прокрутки страницы. При горизонтальной прокрутке фотографий он не работает...
Вот маюсь все, как такое можно сделать...чтоб фотографии загружались по мере скроллинга в ту, или иную сторону по горизонтали, а не по вертикали ?

единственное, что я могу придумать - это заставить браузер принимать горизонтальный скролл в <div> за вертикальный, тока как это сделать я не знаю

Последний раз редактировалось GEN_18, 28.01.2014 в 11:34.
Ответить с цитированием
  #2 (permalink)  
Старый 29.01.2014, 10:22
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Сообщение от GEN_18
Но он работает только при вертикальной прокрутки страницы.
Ну так поменяйте контейнер в том самом плагине. Если, конечно, больше чем на подключение плагина вы согласны.
Ответить с цитированием
  #3 (permalink)  
Старый 29.01.2014, 11:44
Интересующийся
Отправить личное сообщение для GEN_18 Посмотреть профиль Найти все сообщения от GEN_18
 
Регистрация: 13.04.2011
Сообщений: 18

контейнер менял, не помогает.
Сейчас сделал так, чтоб изображения, по мере прокрутки слайдера отображались, но только во время прокрутки страницы, т.е. я прокрутил слайдер, до серого фона, затем прокрутил страницу чуть вверх/вниз и она загрузились

Теперь тут подумал, можно ли как сделать, чтоб браузер думал, что пока ты прокручиваешь слайдер - прокручивается страница, но при этом она оставалась на месте
Ответить с цитированием
  #4 (permalink)  
Старый 29.01.2014, 11:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

Сообщение от GEN_18
Но он работает только при вертикальной прокрутки страницы. При горизонтальной прокрутке фотографий он не работает...

http://www.appelsiini.net/projects/l...container.html
Ответить с цитированием
  #5 (permalink)  
Старый 29.01.2014, 12:02
Интересующийся
Отправить личное сообщение для GEN_18 Посмотреть профиль Найти все сообщения от GEN_18
 
Регистрация: 13.04.2011
Сообщений: 18

рони, я пробовал указывать контейнер со слайдером...в итоге скипт прогружал тока первые картинки, которые изначально были в области экрана, при прокрутке же, он ничего не прогружает
Ответить с цитированием
  #6 (permalink)  
Старый 29.01.2014, 12:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

GEN_18,
слайдер как сделан?
Ответить с цитированием
  #7 (permalink)  
Старый 29.01.2014, 12:54
Интересующийся
Отправить личное сообщение для GEN_18 Посмотреть профиль Найти все сообщения от GEN_18
 
Регистрация: 13.04.2011
Сообщений: 18

рони,
я его взял готовый. работает на 3 скриптах
вот сам мой пример, который я пытаюсь сделать http://sincov.ru/gallery
Ответить с цитированием
  #8 (permalink)  
Старый 29.01.2014, 14:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

GEN_18,
вы не пробовали задать контейнеру конкретный id ?
$(function() {
		$("#test img").lazyload({
		failurelimit : 20,
			threshold : 200,
			placeholder : "/js/grey.gif",
			effect : "fadeIn",
			container: $("#test")
		});
	});


<div class="list" id="test">
Ответить с цитированием
  #9 (permalink)  
Старый 29.01.2014, 15:00
Интересующийся
Отправить личное сообщение для GEN_18 Посмотреть профиль Найти все сообщения от GEN_18
 
Регистрация: 13.04.2011
Сообщений: 18

Конечно пробовал:
Сообщение от GEN_18 Посмотреть сообщение
рони, я пробовал указывать контейнер со слайдером...в итоге скипт прогружал тока первые картинки, которые изначально были в области экрана, при прокрутке же, он ничего не прогружает
А если я вставляю конкретный ID, то выводятся абсолютно все изображения в таком виде
<img alt="" class="gimg203" height="500" src="/files/minified_gallery_201401281650051601_202.jpg" width="332" original="/files/minified_gallery_201401281650051601_202.jpg">

т.е. атрибут src не меняется на необходимый /js/grey.gif

добавил еще такую строку
$(window).bind("load", function() { 
    var timeout = setTimeout(function() { $(".gallery").trigger("scroll") },1000);
});

после чего, через указанное время один раз прогрузятся страницы, на которые я прокрутил скрол

Последний раз редактировалось GEN_18, 29.01.2014 в 15:11.
Ответить с цитированием
  #10 (permalink)  
Старый 29.01.2014, 15:19
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Я имел ввиду докопаться посмотреть как скрипт устроен и поменять ему контейнер и события с окна браузера, на div, или что там. По-моему прокрутка окна и прокурка слоя это разные вещи.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подгрузка изображений по мере прокрутки keslo jQuery 0 07.12.2013 13:39
Загрузка ассива изображений BorodinKO Общие вопросы Javascript 4 04.01.2012 19:23
Асинхронная загрузка изображений InTheTT AJAX и COMET 4 22.10.2011 15:51
Прелоадер. Загрузка всех изображений на сайте пред загрузкой. DorianLeroy Общие вопросы Javascript 5 28.07.2011 17:20
Массовая загрузка изображений ybiza AJAX и COMET 3 15.05.2011 23:02