Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Загрузка изображений по мере прокрутки сладйера (https://javascript.ru/forum/dom-window/44655-zagruzka-izobrazhenijj-po-mere-prokrutki-sladjjera.html)

рони 29.01.2014 15:49

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

GEN_18 29.01.2014 16:10

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

GEN_18 29.01.2014 16:15

рони,
а быть может написать событие скролла, если был скролл, то прогрузить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);
});

GEN_18 29.01.2014 17:01

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

рони 29.01.2014 17:43

GEN_18,
:thanks:

рони 30.01.2014 04:22

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

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

GEN_18 30.01.2014 11:09

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

GEN_18 30.01.2014 11:46

Блин...такой способ не помог ...((((
а так как я в яваскрипт не силен, то для меня сделать, то, что вы посоветовали очень трудно
$(window).onclick("slider", function() { $(".gallery").trigger("scroll"); 
	});

рони 30.01.2014 12:14

Цитата:

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

непонял
Цитата:

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

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

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

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

GEN_18 30.01.2014 12:22

рони,
ну, я попытался сделать, при клике на ползунок - вызов той же функции, что действует при mouseover
Цитата:

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


Часовой пояс GMT +3, время: 15:14.