Skip lazyloading if user has scrolled beyond the image?

[mark-bear-ct]

Hey,

Great library - thanks for developing it. I've got an image gallery with around 1500 thumbnails, and I'd like to prevent lazyload from happening on images I've scrolled beyond. What I'm finding is that even if an image is no longer in my viewport (scrolled beyond it), because I had it in my view, there is a lazyload happening.

Is there any way to perhaps delay lazyload until scrolling has stopped for a given amount of time? I'm running v8.

Thanks!
Mark

[mark-bear-ct]

Should add - I'm using inside of a container around 300px tall - so there's a lot of images being scrolled past which don't need lazy loading yet :)

[verlok]

Hey Mark,
I think this is very similar or the same to what they asked me in #166.
What do you think?

[mark-bear-ct]

Yes - that does look like the same request - a +1 from me on this when you have time, then :) Perhaps doing something like setTimeout on the images which come into view, and at the end of the timeout checking if still in view before updating the src to the value of data-src? Mark

[verlok]

That’s a good idea.
It’s the way I was thinking of to implement it. I still am out of time currently but I’m open to pull requests if you want :)
Do you need it on version 8, version 10 or both?

[verlok]

Duplicate of #166

[verlok]

Hi @mntilbury,

I'm currently developing it and I have a working draft in the feature/loadDelay branch (see here).

I was wondering if you need this in version 8.x too or only in version 10.x, because the way to do it in the different version is very different (so it's double work).

Of course you need it on version 8.x, it's the recommended and best one, right? 😄

[mark-bear-ct]

@verlok Brilliant - thanks for finding the time to implement this feature. I think as long as there is a graceful degrade to 8.x (which I think I read about on the readme.md), 10.x only should be OK - most of the users of this are going to be in Chrome on Mac, so will be able to use 10.x :)

[verlok]

You're right. Thanks for the reply.

[verlok]

Hey guys! I've just released version 10.16 beta with the new feature, so you can give it a try!

Let me know how it goes and if I can promote it to stable!

(I gave it a try in the demos folder and it works perfectly, but since it's a big change in the revealing algorithm, I want your approval too!)

Release notes:

Added new option load_delay to skip loading when fast scrolling occurs, as requested in issues #235 and #166.
Pass in a number of milliseconds, and each image will be loaded after it stayed inside that viewport for that time.

Recipe (from README.md)

💡 Use case: you want the images to stay inside the viewport for some time before to start loading them, e.g. to skip loading some images them if the user scrolled fast after them.

HTML

<img class="lazy" alt="..." 
     data-src="../img/44721746JJ_15_a.jpg"
     width="220" height="280">

Javascript

var myLazyLoad = new LazyLoad({
    elements_selector: ".lazy",
    load_delay: 300 //adjust according to use case
});

DEMO | SOURCE | API

[verlok]

I forgot to say it's also on NPM!

npm install vanilla-lazyload@10.16.0-beta

I don't know if it will released on cdnjs anytime soon. I'll check.

[verlok]

@mntilbury could you try 10.16.0-beta and tell me if it works as you expected?
It's working perfectly in the demos, I just wanted your confirmation.
Thanks in advance

[verlok]

Closing now. Fixed in 10.16.0.

[verlok]

@mark-newby-ct there's a new feature that can activated using the cancel_on_exit: true option that cancels the loading of the image when they exit the viewport. This superseeds the load_delay option, achieving the same effect. So the load_delay option and the code to manage it will be removed.