I need to execute some scripts when all the resources on my domain and subdomain are loaded, so I did this:

$(window).load(function(){
  // al my functions here...
}

The problem is that there are some external resources (not on my domain and subdomain) that sometimes take longer to load. Is there a way to exclude external resources from the load event?

EDIT: I was hoping to do something like:

$(window).not(".idontcare").load(function()

but it's not working

I need to execute some scripts when all the resources on my domain and subdomain are loaded, so I did this:

$(window).load(function(){
  // al my functions here...
}

The problem is that there are some external resources (not on my domain and subdomain) that sometimes take longer to load. Is there a way to exclude external resources from the load event?

EDIT: I was hoping to do something like:

$(window).not(".idontcare").load(function()

but it's not working

• javascript
• jquery

5 Answers 5

I guess your external resources rely on a src attribute.

If so, in your page source code you could set the src attribute of the resources you don't want to wait for, not as src but as external_src.

Then you could easily do:

$(document).ready(function(){

    $(window).load(function(){
        // all your functions here...
    });

    $('[external_src]').each(function() {

        var external_src = $(this).attr("external_src");

        $(this).attr("src", external_src); // now it starts to load
        $(this).removeAttr("external_src"); // keep your DOM clean

        //Or just one line:
        //$(this).attr("src", $(this).attr("external_src")).removeAttr("external_src");

    });

});

This way the external resources should start loading as soon as just the DOM is ready, without waiting for the full window load.

I have almost same case. But in my case, I want to exclude all iframes that load content from another site (e.g. youtube, vimeo etc). Found a work around, so the scenario is hide 'src' attribute from all iframes when DOM is ready and put it back when window is finish load all another content.

(function($){
    //DOM is ready
    $(document).ready(function(){
        var frame = $('iframe'),
            frameSrc = new Array();

        if( frame.length ){
            $.each( frame, function(i, f){
                frameSrc[i] = $(f).attr('src');
                //remove the src attribute so window will ignore these iframes
                $(f).attr('src', '');
            });

            //window finish load
            $(window).on('load',function(){
                $.each( frame, function(a, x){
                    //put the src attribute value back
                    $(x).attr('src', frameSrc[a]);
                });
            });
        }
    });
})(jQuery);

You can mark all elements in your site that load external resources by adding a special class, and change the iframe with $('.special_class') or something like that. I dont know if this is the best way but at least it works great in my side :D

Unfortunately, the window.onload event is very strict. As you might know it will fire when all und every resource was transfered and loaded, images, iframes, everything. So the quick answer to your question is no, there is no easy-to-use way to tell that event to ignore external resources, it makes no difference there.

You would need to handle that yourself, which could be a tricky thing according to how those resources are included and located. You might even need to manipulate the source code before it gets delivered to acplish that.

As far as I know, there is an async - tag for script tags. You can your includes to:

<script src="script_path" async="true"></script>

This will not include them to the event.

maybe

$(document).ready(...)

instead of $(window).load() will help?

The document ready event executes already when the HTML-Document is loaded and the DOM is ready, even if all the graphics haven’t loaded yet.