Lazy Load Images for canvas

[bultano]

 

Hi guys

 

Above is the demo version of a project I am working on in which the user scrolls and progresses the animation whilst the screen is fixed, this works pretty well. My animation has around 700 frames and these are loaded in all at once, is there a solution to load these on demand in batches rather the full 700?

 

The example above has 200 frames

 

Thanks

J

See the Pen ZEwgvmx by bultano (@bultano) on CodePen

[mvaneijgen]

Hi @bultano this isn't really a GSAP question, GSAP doesn't load anything this is all the browser/Javascript doing this logic.

 

I see people suggesting to put all the images in a setTimeout (https://stackoverflow.com/questions/19434750/how-to-lazy-load-canvas-elements) and load them in batches, instead of a setTimeout I would suggest a gsap.delayedCall() https://gsap.com/docs/v3/GSAP/gsap.delayedCall()/, because that will be more insync with all the other GSAP logic, but that is based on the suggestion above and I don't know if that is the best solution for your use case, but further then that I can't see how GSAP could help with thato f course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

Hope it helps and happy tweening! 

[Rodrigo]

Hi,

 

Lazy loading images when they would be rendered based on the scroll position could be quite complicated, imagine the use hits the end/next-page button. Normally sites like this create an odd UX, on one hand you have very nice UI and interactive experience, but you have to wait a bit to get there, so there is always a tradeoff. The issue I see in this one is that you have to track all 700 urls when they are finished loading, they way I'd approach this initially would be to create some kind of loop that loads the first 200, when that is completed go onto the next 200 and so forth until all the images are loaded.

 

Honestly I think the best approach is trial and error, find the better way that creates less stress in your app and stay with that.

 

Happy Tweening!