Vanilla-lazyload: Fast scroll - Only reveal images that are still in my screen after some time

[tfrere]

Are you reporting a bug or requesting a feature?
Feature !

Hi there,

The case :
In case of fast scroll down on a long page

The behaviour :
The plugin will reveal all the images that have been viewed in the right order and it will take a long time before loading the ones that are in my screen at the end of the scroll.

What i wish :
Only reveal the images that are still in my screen after some time.

What do you think ?

[verlok]

It’s a good idea. Also, it shouldn’t be that hard to do. I’ll dedicate some time to this feature, as soon as I can. Thanks for the idea!

[tfrere]

Ho yeah, nice to hear that,
you saved my day :D

I am not confident enough in javascript to write an elegant solution, that's why i didn't came with a solution in the first place :)

[verlok]

Sorry about being so late, I’ve been very busy at work and tired at nights :) I will try and implement this feature at some point, but I just don’t know when, and if it’s possible to do this with a few lines of code. If it’s not feasible with a few lines of code, I’d probably skip it, since the vast majority of users want to do the opposite: load images before they enter the viewport to avoid their users see the loading time, but I get your point.

[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 [email protected]

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

[verlok]

@tfrere I’m waiting for your feedback :)

[verlok]

Ok, closing this.

[verlok]

@tfrere 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.