Загрузка изображений по мере прокрутки сладйера
 

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

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

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

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

Теперь тут подумал, можно ли как сделать, чтоб браузер думал, что пока ты прокручиваешь слайдер - прокручивается страница, но при этом она оставалась на месте

:no:
http://www.appelsiini.net/projects/l...container.html

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

GEN_18,
слайдер как сделан?

рони,
я его взял готовый. работает на 3 скриптах
вот сам мой пример, который я пытаюсь сделать http://sincov.ru/gallery

GEN_18,
вы не пробовали задать контейнеру конкретный id ?

$(function() {
		$("#test img").lazyload({
		failurelimit : 20,
			threshold : 200,
			placeholder : "/js/grey.gif",
			effect : "fadeIn",
			container: $("#test")
		});
	});

<div class="list" id="test">

Конечно пробовал:
А если я вставляю конкретный 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);
});

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

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

:write: GEN_18,
lazyload незнает что слайдер скролит его контейнер поэтому никак не реагирует и не загружает картинок -- либо совмещать коня и лань либо например использовать event: 'mouseover' , направил коня курсор на картинку дверь и открылась она и загрузилась.

kostyanet,
в том то и беда, я не очень разбираюсь в яваскрипте, но стараюсь хоть как то понять.
вот скрипт, отвечающий за скролл внутри дива, к которому я никак не могу прикрутить lazyload

рони,
а быть может написать событие скролла, если был скролл, то прогрузить7
попытался написать, используя матеариал на сайте, но не вышло

$(function() {
  $("img").lazyload({
    failurelimit : 20,
    threshold : 200,
    placeholder : "/js/grey.gif",
    effect : "fadeIn",
    container: $(".gallery")
  });
});
 
var elem = document.getElementByClass('list');
 
if (elem.addEventListener) {
  if ('onwheel' in document) {
    // IE9+, FF17+
    elem.addEventListener ("wheel", load, false);
  } else if ('onmousewheel' in document) {
    // устаревший вариант события
    elem.addEventListener ("mousewheel", load, false);
  } else {
    // 3.5 <= Firefox < 17, более старое событие DOMMouseScroll пропустим
    elem.addEventListener ("MozMousePixelScroll", load, false);
  }
} else { // IE<9
  elem.attachEvent ("onmousewheel", load);
}
 
 
$(window).bind("load", function() {
    var timeout = setTimeout(function() { $(".gallery").trigger("scroll") },1000);
});

рони,
более менее решил проблему через mouseover
теперь все работает как нужно! спасибо!

GEN_18,
:thanks:

:write:
пример адапивного слайдера с дозагрузкой а основе ползунка http://jqueryui.com/slider/ и дозагрузчика lazyload
подстроится под любую ширину окна
смотреть тут :
http://learn.javascript.ru/play/B32mZ
дозагрузка происходит при перетаскивании рукоятки ползунка - в момент отпускания или клика по полосе перемещения.

можно доработать скролинг мышкой на самом слайдере при желании )))

рони,
странно, а почему б не сделать на ползунке тоже самое что со скроллом мышки, но тока при клике мышки...

Блин...такой способ не помог ...((((
а так как я в яваскрипт не силен, то для меня сделать, то, что вы посоветовали очень трудно

$(window).onclick("slider", function() { $(".gallery").trigger("scroll"); 
	});

непонял
что я посоветовал? какой способ непомог?

на всякий случай lazyload в примере выше адаптирован чтоб реагировать на ползунок и скорее черновик ))) проба обойтись без скрипта слайдера на grandreport

$(".gallery").trigger("scroll")
да и по такой команде подгружаются сразу все картинки а не только те что в зоне видимости -- это так на всякий случай.

рони,
ну, я попытался сделать, при клике на ползунок - вызов той же функции, что действует при mouseover
в моем случае - подгружаются картинке в диапазоне 1000 px

сомнения меня мучают что это так ))) по моему все

рони,
http://clip2net.com/s/6HOhKR
вот же, видно, что загружаются не все картинки

GEN_18,
вкладка сеть --- при заходе на страницу http://sincov.ru/gallery идёт прогрузка многих картинок на 1000 пикселей хватает и трёх -- грузятся все -- потом вставляются из кеша -- в моём случае http://learn.javascript.ru/play/B32mZ прогрузились 3 картинки из зоны видимости -- остальные только по требованию (клику) -- кеш я предварительно очистил.

рони,
Блииин...точно (((

Люди которые в скриптах не разбираются, слайдеров с автозагрузкой не хотят.

Да еще таких, которыми никто пользоваться не станет.