Javascript listener to capture URL of currently loading resource

Question

Is there any way to capture URLs of currently loading resource in javascript. For example, if browser starts downloading a JS, CSS or IMG file then is there any way we can get notified which resource is being loaded?

Something Like:

window.onResourceLoad = function (e) {
   alert(e.URL);
}

You may be able to create a listener for added nodes with the MutationObserver API. You would specify it to observe for { childList: true }, then filter the DOM tree for images & scripts (and any other elements you are interested in), set a loading flag for each new element, and bind a load listener on those elements to remove the flag — however this is likely to be incredibly computationally expensive, full of quirks and only applicable to modern browsers. — Barney
– Barney, Commented Jan 14, 2014 at 18:50

Girish · Accepted Answer · 2014-01-14 18:27:33Z

0

For JS please use jQuery getScript() function, Like this

$.getScript(URL, function(){
 /*Script loaded*/
 //APPLY ACTION HERE
})

For CSS, please load css from get function and append css in head

$.get(myStylesLocation, function(css)
{
   $('<style type="text/css"></style>')
      .html(css)
      .appendTo("head");
   /*CSS loaded */
   //APPLY ACTION HERE
});

answered Jan 14, 2014 at 18:27

Girish

12.1k3 gold badges37 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

asim-ishaq Over a year ago

Actually, I am not loading the resources, the browser is. I need to hook into an event where I get notified of when a resource start loading. The resource can be any css, js, img, font file etc

Girish Over a year ago

@asim-ishaq Resource Loading... or loaded?

asim-ishaq Over a year ago

At any point, before, after or during. But must notify for each of them.

Girish Over a year ago

@asim-ishaq You will need need to identify resource information custom, You should use setTimeout to pull up resources information is ready or being loading... like JavaScript check function not undefined, for css (stackoverflow.com/questions/3744270/…) For image document.getElementById('image_id').onload = func; This is only way.. if you comfort with.. good luck

Collectives™ on Stack Overflow

Javascript listener to capture URL of currently loading resource

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related