Use DOMContentLoaded instead of onload for initializing p5
#3347
Conversation
Documentation: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded Quoth MDN: “A very different event load should be used only to detect a fully-loaded page. It is an incredibly common mistake to use load where DOMContentLoaded would be much more appropriate, so be cautious.” DOMContentLoaded is supported in all modern browsers, and can make a significant difference in page load performance when a page has many external assets, such as images and iframes.
|
Are we sure we don't need any images or stylesheets that is requested in the DOM before p5 starts? I'm not entirely sure myself but we need to make sure that is the case first. |
@calebegg any thoughts on this? i'm doing a little research to see if this makes sense for p5. |
|
It's up to you. I wrote this patch for a friend and he's used it successfully to significantly speed up his site, so I decided to offer it to you as a courtesy. I've included a link to MDN's explanation of the differences. I cannot imagine a scenario where this change would break a p5 sketch, but I've experienced breakages with even the "safest" of changes in large projects, as I'm sure have y'all. |
|
my only concern would be drawing text in |
|
@Spongman wouldn't this kick off the This could also be a problem for people who are perhaps loading data from image or video elements that are included in the page, right? Perhaps we could have a |
|
thanks @calebegg!
this is my main concern, too @meiamsome. 🤔 i'll put together a test case soon |
|
i believe |
|
Hm I feel like this doesn't technically speed anything up, it just changes the order for p5 to start. This test seems like a good explanation of the difference. Should p5 wait for external assets to load before initializing? I kind of feel that it should. I think it would be rare for someone to need a p5 sketch to load first on a page with a ton of external assets. Whereas I can imagine it being more common for someone to try to grab pixel data from a DOM img in |
|
So that which prompted caleb to help me modify the p5.dom.js file was that
I was using a p5 sketch as a banner for my website which includes multiple
embedded Vimeo videos. With the unmodified version, all of the videos load
slowly (and visibly as their relative positioning has not been moved down
by the div container for the p5 sketch being populated).
I love the idea of having a preload method that makes the order
more-visibly optional and not buried.
Thanks for the attention!
-Jesse
…On Sun, Feb 24, 2019 at 6:55 PM Stalgia Grigg ***@***.***> wrote:
Hm I feel like this doesn't technically speed anything up, it just changes
the order for p5 to start. This test seems like a good explanation of the
difference.
<http://web.archive.org/web/20150405114023/http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/Default.html>
Should p5 wait for external assets to load before initializing? I kind of
feel that it should. I think it would be rare for someone to need a p5
sketch to load first on a page with a ton of external assets. Whereas I can
imagine it being more common for someone to try to grab pixel data from a
DOM img in setup. I think it is more beginner friendly to handle the
latter case.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#3347 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/ApoMWDjgy23uRx1WOq0RISQHUTT8b7y7ks5vQyaAgaJpZM4Y2FWm>
.
|
|
Ah gotchya thanks for the example. I agree that a preload method would be cool. I guess the question then is which should be the default behavior. Load first as in this PR or wait for all external assets in the page to load as in current behavior? There isn't an obvious favorite to me. |
|
It seems like the current order makes sense as the default since the
problem in my use case is purely aesthetic and not about getting info from
assets.
…On Sun, Feb 24, 2019 at 7:23 PM Stalgia Grigg ***@***.***> wrote:
Ah gotchya thanks for the example. I agree that a preload method would be
cool. I guess the question then is which should be the default behavior.
Load first as in this PR or wait for all external assets in the page to
load as in current behavior? There isn't an obvious favorite to me.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#3347 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/ApoMWDQNIrFYpBVO-OVPpL8cjMcBCJBKks5vQy0KgaJpZM4Y2FWm>
.
|
|
Thanks for the PR and discussion starter @calebegg. I am closing this for now as I opened an issue that points to the feature request discussed in this PR. |
Documentation:
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
MDN says:
DOMContentLoaded is supported in all modern browsers (IE9+), and can make a
significant difference in page load performance when a page has many
external assets, such as images and iframes.
/cc @jesse-harding