lazy loading in Framework for multiple p5 sketches

New To Observable
1

Hi @mbostock

I am experimenting to display multiple sketches (potentially several dozens or more) in a single Framework md page, and eventually I think I need to have lazy loading feature enabled.

I have managed to make the lazy loading work (but flickering due to the wrong way of using the helper function by adding .parent("div name") to each p5 sketch. see the demo on this page and scroll to see the lazy loading effect.

Then after fixing the flickering effect by following your advice, see the demo on this page I could not get the lazy loading feature to work. The problem seems to be I can’t find a way to reference the sketches and display them when I put them inside a html literal without using parent("div name").

You can click the details button to see my code on lazy loading and all the other relevant codes in both pages.

Is there a way for me to make this lazy loading feature to work?

Thanks a lot!

I wonder whether invalidation promise is the easiest way to make my working version of lazy loading without flickering? The problem is after reading the page of invalidation promise I still have no idea how to implement it. :sweat_smile:

2

I guess, running hundreds of sketches on a single page is a ill desire by nature. If really doable, then code inside a single md file would be too long and not quite manageable. If split into multiple md files, then lazy loading won’t be necessary.

Thanks!

3

You can use the visibility promise to wait until the sketch is visible before initializing it, or more generally use an IntersectionObserver to detect whether the sketch is visible, and then automatically pause it when it’s outside the viewport. It’s work though. :grin: