Is there an event that fires when JavaScript files are loaded? The problem came up because YSlow recommends to move JavaScript files to the bottom of the page. This means that $(document).ready(function1)
is fired before the js file that contains the code for function1
is loaded.
How to avoid this kind of situation?
The IAmReady function will have a logic to run the boot code once it gets two calls (storing the the number of calls in a static/global variable) from the two js files. Show activity on this post. Change the loading order of your scripts so that function1 was defined before using it in ready callback.
If you go to the sources tab in Chrome, you'll see the a list of domains. Search for your own domain, for example 'localhost'. If you open the map, you'll see all folders and files that are loaded into your current page. You'll also see all other domains where you've used files (like JS, CSS, images, etc.)
I don't have a reference for it handy, but script tags are processed in order, and so if you put your $(document).ready(function1)
in a script tag after the script tags that define function1, etc., you should be good to go.
<script type='text/javascript' src='...'></script> <script type='text/javascript' src='...'></script> <script type='text/javascript'> $(document).ready(function1); </script>
Of course, another approach would be to ensure that you're using only one script tag, in total, by combining files as part of your build process. (Unless you're loading the other ones from a CDN somewhere.) That will also help improve the perceived speed of your page.
EDIT: Just realized that I didn't actually answer your question: I don't think there's a cross-browser event that's fired, no. There is if you work hard enough, see below. You can test for symbols and use setTimeout to reschedule:
<script type='text/javascript'> function fireWhenReady() { if (typeof function1 != 'undefined') { function1(); } else { setTimeout(fireWhenReady, 100); } } $(document).ready(fireWhenReady); </script>
...but you shouldn't have to do that if you get your script tag order correct.
Update: You can get load notifications for script
elements you add to the page dynamically if you like. To get broad browser support, you have to do two different things, but as a combined technique this works:
function loadScript(path, callback) { var done = false; var scr = document.createElement('script'); scr.onload = handleLoad; scr.onreadystatechange = handleReadyStateChange; scr.onerror = handleError; scr.src = path; document.body.appendChild(scr); function handleLoad() { if (!done) { done = true; callback(path, "ok"); } } function handleReadyStateChange() { var state; if (!done) { state = scr.readyState; if (state === "complete") { handleLoad(); } } } function handleError() { if (!done) { done = true; callback(path, "error"); } } }
In my experience, error notification (onerror
) is not 100% cross-browser reliable. Also note that some browsers will do both mechanisms, hence the done
variable to avoid duplicate notifications.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With