At first this might seem an odd question, but here's my problem. I'm developing a website that on window.load calculates the div positions as it has some dynamic scroll event highlighting (DOM Ready is the wrong choice for this as images and content isn't loaded yet and the calculate div positions are incorrect when the page has fully rendered.) The local assets run perfectly and are optimised for performance, but my problem is that the client wants social media embeds, for instance a twitter follow and facebook like button. Twitter seems to render pretty quickly, but Facebook takes so long and you can literally lag for about 20-30 seconds before the window.load event is ready, which means my navigation then lags and doesn't work properly. I don't know if it's even possible, but is there a way to determine when all local JavaScript files are loaded (these are included before the closing body tag).
-
1If window.load is firing "too late" because of external plugins - then don't embed the HTML version of those plugins, but add them dynamically via JS after page load.C3roe– C3roe2013-05-28 08:10:14 +00:00Commented May 28, 2013 at 8:10
-
Thanks @CBroe - so you're saying, when the window.load event is ready, then load the scripts in with JS? That seems logical :) though the scripts are all running via JS to begin with, perhaps I can wrap those in a window.load wrapper?Stephen Jenkins– Stephen Jenkins2013-05-28 08:11:01 +00:00Commented May 28, 2013 at 8:11
1 Answer
Probably. All JavaScript in a page is executed in the order in which the browser encounters it. So when you add a <script> element as the last element inside the <body> element (i.e. at the bottom of the page), this code will run after all other script code has been executed. Also, at that time, the DOM will be finished (no further HTML to process) except for things that callbacks still might do (timers, onload-handlers).
So what you can try is to put a <script> element between your code and the code from Facebook. But that means your DOM won't be ready.
A better solution is probably to start loading the Facebook code in the background inside of onload. That means all the rest of the page is there and Facebook can take its time.