html <link> and <script> tags not working with jquery .on('load') event listener
<p>In my project, I am designing a page load progress bar like Youtube. For that, I am capturing all the rich element tags like img, iframe, video, audio etc, and controlling the width of the progress bar as and when each of the tags are getting loaded. You can have a look at the code below.</p>

<pre><code>var media_nos = $("body img").length + $("body iframe").length + $("body video").length + $("link").length + $("body script").length;
      console.log(media_nos);

        doProgress();

        // function for the progress bar
        function doProgress() {
            $("body img, body iframe").on('load', function() {
                loading.loaded++;
          console.log(loading.loaded);
                var newWidthPercentage = (loading.loaded / media_nos) * 100;
                animateLoader(newWidthPercentage + '%');
            }).each(function(){
            if(this.complete) {
            $(this).trigger('load');
              }
            });
        $('body video').on('canplaythrough', function() {
                loading.loaded++;
                var newWidthPercentage = (loaded / media_nos) * 100;
                animateLoader(newWidthPercentage + '%');
            }).each(function(){
            if(this.complete) {
            $(this).trigger('load');
                }
            });

      }

      //Animate the loader
      function animateLoader(newWidth) {
        $("#progressBar").width(newWidth);
        if(loading.loaded==media_nos){
            setTimeout(function(){
                        $("#progressBar").animate({opacity:0});
                        },500);
        }
      }
</code></pre>

<p>But, the problem here is I am not able to track the loading of the link and script tags using the jquery .on('load') method as I did for img, iframe tags etc. It works if I write an inline onload attribute to link tags as shown below.</p>

<pre><code>    &lt;link rel="stylesheet" href="css/bootstrap.min.css" onload="load();"&gt;
    &lt;link rel="stylesheet" href="css/bootstrap-theme.min.css" onload="load();"&gt;
    &lt;link rel="stylesheet" href="css/style.css" onload="load();"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" onload="load();"&gt;
</code></pre>

<p>main.js</p>

<pre><code>var loading = {"loaded" : 0};
function load() {
    console.log("hello");
    loading.loaded++;
    console.log(loading.loaded);
}
</code></pre>

<p>As you will know, its very hectic to write an inline onload for every such link and script tags, is there any way I can track the loading of the link and script tags in a better way like the .on('load') method? Thanks in advance.</p>