isInViewport / feature request about jquery.lazy

[dkern]

Hello @FlorianWerndl,

thanks for sharing your idea. I'm open for all new ideas!

But actually I'm not sure what you mean. What do you have in mind? Could you create an simple example how you suppose to use this feature?

Thanks!

[FlorianWerndl]

Something like this: https://github.com/customd/jquery-visible
Or could be an event which gives you all the elements within the viewport right now.
You could react on the status of the element.

Do you know what I mean?

[dkern]

If I understand you correctly, you want a way to overwrite the default visbile detection. I think a function or an event would be a bit much overhead wor this task. First idea I've got would be to use the elements data. Possible like this:

someElements.data('visible', true);
lazyInstance.update(); // only needed if instant execution is wanted

[FlorianWerndl]

I don't know if it is necessary to overwrite the default visible detection.
It would just be nice to know if a already loaded element is in the viewport
or not when the user scrolls the site.

[dkern]

Ok, now I'm not sure about the problem again. 😅

Where do you want to know it? Inside of callbacks and custom loaders you will know it, of course. So you're talking about an event, what will be triggered on an element, whenever Lazy means, the element is in the defined viewport? Well, that can be easily done by yourself.

Think about this:

var elements = $('selector');

elements.on('enteredLazyViewport', function() {
    console.log('element is in the viewport now');
});

elements.lazy({
    beforeLoad: function(element) {
        element.trigger('enteredLazyViewport');
    }
});

[FlorianWerndl]

Yes, I got something like this.

But imagine something like this:

var elements = $('selector');

elements.on('isInLazyViewport', function() {
    console.log('element is in the viewport at the moment!');
});

elements.on('isNotInLazyViewport', function() {
    console.log('element is not in the viewport at the moment!');
});


elements.lazy({
    isInViewport: function(element) {
        element.trigger('isInLazyViewport');
    },
    isNotInViewport: function(element) {
        element.trigger('isNotInLazyViewport');
    }
});

And this changes while the user is scrolling the site.

[dkern]

Ahh, okay. The first isInLazyViewport is not a problem, but isNotInLazyViewport would be a bit complicated. Lazy will drop the elements from the queue, once they are handled. This is a performance point. Otherwise it would have to check every element ever added over and over again. But on big lists, galleries or infinit scrolls it is faster to just remove the elements after handling to shrink the queue.

So without changing this whole behavior of the plugin, I don't see a implementation of this events. If you really need such events, I would think about copy that part, and implement it by yourself outside of the plugin. You can use the function out of the plugin easily:

// function copied out of Lazy plugin
function isInLoadableArea(element, direction, threshold) {
    var elementBound = element.getBoundingClientRect(),
        vertical     = (($(window).height() + threshold) > elementBound.top) &&
                       (-threshold < elementBound.bottom),
        horizontal   = (($(window).width() + threshold) > elementBound.left) &&
                       (-threshold < elementBound.right);

    if( direction == 'vertical' ) return vertical;
    else if( direction == 'horizontal' ) return horizontal;

    return vertical && horizontal;
}

And then just use it in any function or event:

// your elements with listeners
var elements = $('selector').on({
    isInLazyViewport: function() {
        console.log('element is in the viewport at the moment');
    },
    isNotInLazyViewport: function() {
        console.log('element is not the viewport at the moment');
    }
});

// listen on scroll too to determine changed
$(window).scroll(function() {
    // loop each and trigger what you want
    elements.each(function() {
        $(this).trigger(isInLoadableArea(this, 'vertical', 0) ? 'isInLazyViewport' : 'isNotInLazyViewport');
    });
});

You could even get the configuration out of your Lazy instance, if you want it more dynamic:

var direction = lazyInstance.config('direction'),
    threshold = lazyInstance.config('threshold');

[FlorianWerndl]

Thanks!

I thought maybe lazy is doing this check anyway so I don't need to implement it again or use another library. I totally understand that you are dropping the elements once they are handled so you don't run into performance issues.

[dkern]

I'm sorry that I have no better answer. But I think that is such a special wish, that it's not worth the complete change of this.

[FlorianWerndl]

No problem. Thank you for the quick response!