Question

我试图弄清楚如果所有图像都加载后如何从滚动事件中取消绑定。这是我到目前为止所做的最好的，但实际上我想实际解开它，比如以某种方式使用$.off()和/或$.promise()。如果有更好的方法，我宁愿不创建变量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

Answer 1

On和off是委托事件，而不是绑定事件;所以应该使用：

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

你想解开的只是使用：

$(window).unbind('scroll')

Answer 2

解决方案是在加载所有图像时创建triggers的自定义事件处理程序。这就像一个魅力：

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);
});

文档建议使用on / off而不是bind / unbind。两种方式都适用于此。 $.one()方法只运行一次。

加载lazyload内容后关闭滚动事件

2 个答案: