search

processing / p5.js-website

New p5.js website!
http://p5js.org
MIT License
19 stars 89 forks source link

Some reference examples don't immediately show up, need to click the play button #442

Closed davepagurek closed 4 months ago

davepagurek commented 4 months ago

@wagedu mentioned this in a prior comment:

Not sure if it's related but some of the Reference examples are auto-run while others need the Play button to be pressed. ie: https://p5js.org/reference/p5/arc/ 3 first examples auto-run, next 7 don't

https://p5js.org/reference/p5/ellipse/ 4 first examples auto-run, the 5th don't

Seems that the culprit is the lazyLoad property on the CodeEmbed widget: https://github.com/processing/p5.js-website/blob/974470a0c2e89f5c50e2cf9d243f47cf12a63179/src/layouts/ReferenceItemLayout.astro#L105

This hands things off to the browser and it seems like the browser isn't correctly loading them when they become visible.

It could be ok if CodeEmbed is always eager because they already don't immediately start running until they scroll into view (we have scroll detection and an `IntersectionObserver1 for this.) So maybe it's worth just relying on that?

Qianqianye commented 4 months ago

Thanks @davepagurek. Wondering if @outofambit @stalgiag have any insights on this?

stalgiag commented 4 months ago

It could be ok if CodeEmbed is always eager because they already don't immediately start running until they scroll into view (we have scroll detection and an `IntersectionObserver1 for this.) So maybe it's worth just relying on that?

I agree with this. Thanks @davepagurek