Jquery: exclude external resources from $ (window) .load ()

Question

I need to execute some scripts when all resources of 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 my domain and subdomain) that sometimes take longer to load. Is there a way to exclude external resources from a load event?

EDIT: I was hoping to do something like:

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

but it does not work

Answer 1

I believe your external resources depend on the src attribute.

If so, in the source code of the page you can set the src attribute of resources that you do not want to wait, not as src , but as external_src .

Then you can 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"); }); }); 

Thus, external resources should be loaded as soon as the DOM is ready, without waiting for the window to fully load.

Answer 2

I have almost the same case. But in my case, I want to exclude all iframes downloading content from another site (e.g. youtube, vimeo, etc.). The job was found, so the script is the hide 'src' attribute from all iframes when the DOM is ready and returns it when the window ends, loads all other 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 the elements of your site that load external resources by adding a special class and changing the iframe with $('.special_class') or something like that. I don't know if this is the best, but at least it works fine on my side: D

Answer 3

Unfortunately, the window.onload event is very strict. As you know, this will work when everything and every resource is transferred and loaded, images, iframes, everything. Thus, the quick answer to your question is no, there is no easy-to-use way to tell this event to ignore external resources, there is no difference.

You will need to deal with this yourself, which can be a daunting task according to how these resources are turned on and located. You might even need to manipulate the source code before it is delivered to accomplish this.

Answer 4

As far as I know, there is an asynchronous tag for script tags. You can include:

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

This will not include them in the event.

Answer 5

perhaps

 $(document).ready(...) 

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

The document ready event is already triggered when the HTML document is loaded and the DOM is ready, even if all image files are not already loaded.