
28.01.2014, 11:22
|
Интересующийся
|
|
Регистрация: 13.04.2011
Сообщений: 18
|
|
Загрузка изображений по мере прокрутки сладйера
Есть слайдер фотографий на подобие http://grandreport.ru/reportage/ , где крутится около 300 фотографий.
Чтоб увеличить скорость загрузки сайта, решил применить плагин lazyload.
Но он работает только при вертикальной прокрутки страницы. При горизонтальной прокрутке фотографий он не работает...
Вот маюсь все, как такое можно сделать...чтоб фотографии загружались по мере скроллинга в ту, или иную сторону по горизонтали, а не по вертикали ?
единственное, что я могу придумать - это заставить браузер принимать горизонтальный скролл в <div> за вертикальный, тока как это сделать я не знаю
Последний раз редактировалось GEN_18, 28.01.2014 в 11:34.
|
|

29.01.2014, 10:22
|
Профессор
|
|
Регистрация: 23.10.2010
Сообщений: 2,718
|
|
Сообщение от GEN_18
|
Но он работает только при вертикальной прокрутки страницы.
|
Ну так поменяйте контейнер в том самом плагине. Если, конечно, больше чем на подключение плагина вы согласны.
|
|

29.01.2014, 11:44
|
Интересующийся
|
|
Регистрация: 13.04.2011
Сообщений: 18
|
|
контейнер менял, не помогает.
Сейчас сделал так, чтоб изображения, по мере прокрутки слайдера отображались, но только во время прокрутки страницы, т.е. я прокрутил слайдер, до серого фона, затем прокрутил страницу чуть вверх/вниз и она загрузились
Теперь тут подумал, можно ли как сделать, чтоб браузер думал, что пока ты прокручиваешь слайдер - прокручивается страница, но при этом она оставалась на месте
|
|

29.01.2014, 12:02
|
Интересующийся
|
|
Регистрация: 13.04.2011
Сообщений: 18
|
|
рони, я пробовал указывать контейнер со слайдером...в итоге скипт прогружал тока первые картинки, которые изначально были в области экрана, при прокрутке же, он ничего не прогружает
|
|

29.01.2014, 12:07
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,136
|
|
GEN_18,
слайдер как сделан?
|
|

29.01.2014, 12:54
|
Интересующийся
|
|
Регистрация: 13.04.2011
Сообщений: 18
|
|
рони,
я его взял готовый. работает на 3 скриптах
вот сам мой пример, который я пытаюсь сделать http://sincov.ru/gallery
|
|

29.01.2014, 14:26
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,136
|
|
GEN_18,
вы не пробовали задать контейнеру конкретный id ?
$(function() {
$("#test img").lazyload({
failurelimit : 20,
threshold : 200,
placeholder : "/js/grey.gif",
effect : "fadeIn",
container: $("#test")
});
});
<div class="list" id="test">
|
|

29.01.2014, 15:00
|
Интересующийся
|
|
Регистрация: 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.
|
|

29.01.2014, 15:19
|
Профессор
|
|
Регистрация: 23.10.2010
Сообщений: 2,718
|
|
Я имел ввиду докопаться посмотреть как скрипт устроен и поменять ему контейнер и события с окна браузера, на div, или что там. По-моему прокрутка окна и прокурка слоя это разные вещи.
|
|
|
|