Отключить событие прокрутки после загрузки содержимого lazyload - PullRequest
Новая
       0

Отключить событие прокрутки после загрузки содержимого lazyload

0 голосов
/ 26 января 2012

Я пытаюсь выяснить, как отсоединить от события прокрутки после загрузки всех изображений. Это лучшее, что у меня есть на данный момент, но на самом деле я хочу на самом деле отменить его, например, используя $. Off () и / или $. Обещание () . Я бы не стал создавать переменные totalNumImages и alreadyLoaded для сравнения, если есть лучший способ. Я мог бы позвонить $. On () в пределах $. Each () , если это сделает это более возможным. Идеи? 

var $images = $('img.lazyload')
  , alreadyLoaded = []
  , totalNumImages = $images.length
;//var

$(window).on('scroll.myNamespace', function() {
    $.each($images, function(i) {
    if ( !alreadyLoaded[i] && inViewport(this) ) {
        $(this).attr('src', savedImgSrc); // Load image.
            alreadyLoaded[i] = true;
    }
    });
});//on

Ответы [ 2 ]

1 голос
/ 26 января 2012

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

$(window).scroll(function(){ /* the code */ })

А где вы хотите отменить привязку, просто используйте: 

$(window).unbind('scroll')
0 голосов
/ 26 января 2012

Решение заключается в создании пользовательского обработчика событий, который запускает при загрузке всех изображений.Это работает как талисман: 

var $images = $('img.lazyload')
  , $window = $(window)
  , alreadyLoaded = []
  , totalNumImages = $images.length // stays the same
;//var

function doLazyLoad() {

    $.each($images, function(i) { 
        if ( alreadyLoaded[i] ) { 
            return; // Quit asap if already loaded.
        } 
        if ( inViewport(this) ) {  // inViewport and loadImage
            loadImage(this);       // are defined elsewhere.
            alreadyLoaded[i] = 1;  // Add item to array.
        }
    });

    // Trigger custom event when all have been loaded:
    if ( alreadyLoaded.join('').length === totalNumImages ) {
        $images.trigger('customEventAllLoaded.myNamespace');
    }

}//doLazyLoad

// Attach doLazyLoad() to the scroll event:
$window.on('scroll.myNamespace', doLazyLoad);

// When the custom event is triggered, run a one-time event
// handler that detaches doLazyLoad() from the scroll event.
$images.one('customEventAllLoaded.myNamespace', function() {
    $window.off('scroll.myNamespace', doLazyLoad);
});

В документах рекомендуется использовать вкл / выкл, а не связывать / откреплять.Оба способа будут работать для этого.Метод $. One () запускается только один раз.

...