Organizational Research By

Surprising Reserch Topic

how to detect if javascript files are loaded

how to detect if javascript files are loaded  using -'javascript,jquery'

Is there a event that fires when javascript files are loaded. The problem occured because YSlow recoment to move javascript files in bottom of the page. This means that
$(document).ready(function1) is fired before js file that contains code of function1 event is loaded.

How to avoid this kind of situation?

asked Oct 19, 2015 by mannumits1
0 votes

Related Hot Questions

5 Answers

0 votes

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.

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:

...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;

    function handleLoad() {
        if (!done) {
            done = true;
            callback(path, "ok");

    function handleReadyStateChange() {
        var state;

        if (!done) {
            state = scr.readyState;
            if (state === "complete") {
    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.

answered Oct 19, 2015 by android_master
0 votes

When they say "The bottom of the page" they don't literally mean the bottom: they mean just before the closing tag. Place your scripts there and they will be loaded before the DOMReady event; place them afterwards and the DOM will be ready before they are loaded (because it's complete when the closing tag is parsed), which as you have found will not work.

If you're wondering how I know that this is what they mean: I have worked at Yahoo! and we put our scripts just before the tag :-)

EDIT: also, see T.J. Crowder's reply and make sure you have things in the correct order.

answered Oct 19, 2015 by jekbishnoi
0 votes

I always make a call from the end of the JavaScript files for registering its loading and it used to work perfect for me for all the browsers.

Ex: I have an index.htm, Js1.js and Js2.js. I add the function IAmReady(Id) in index.htm header and call it with parameters 1 and 2 from the end of the files, Js1 and Js2 respectively. 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.

answered Oct 19, 2015 by ashishshukla
0 votes

Change the loading order of your scripts so that function1 was defined before using it in ready callback.

Plus I always found it better to define ready callback as an anonymous method then named one.

answered Oct 19, 2015 by sumit_jaiswalmca
0 votes

Like T.J. wrote: the order is defined (at least it's sequential when your browser is about to execute any JavaScript, even if it may download the scripts in parallel somehow). However, as apparently you're having trouble, maybe you're using third-party JavaScript libraries that yield some 404 Not Found or timeout? If so, then read Best way to use Google’s hosted jQuery, but fall back to my hosted library on Google fail.

answered Oct 19, 2015 by tseetha