html <link> и <script>, не работающие с jquery .on ('load') прослушиватель событий

В моем проекте я разрабатываю план выполнения загрузки страницы, например, Youtube. Для этого я собираю все яркие теги элементов, такие как img, iframe, видео, аудио и т. Д. И контролируя ширину полосы выполнения, когда и когда каждый из тегов загружается. Вы можете посмотреть на код ниже.

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);
        }
      }

Но проблема здесь в том, что я не могу отслеживать загрузку тегов ссылок и скриптов с помощью метода jquery .on ('load'), как и для img, тегов iframe и т. Д. Он работает, если я пишу встроенный атрибут onload чтобы связать теги, как показано ниже.

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

main.js

var loading = {"loaded" : 0};
function load() {
    console.log("hello");
    loading.loaded++;
    console.log(loading.loaded);
}

Как вы узнаете, очень тяжело писать встроенную нагрузку для каждого такого тега ссылки и скрипта, есть ли способ отслеживать загрузку тегов ссылок и сценариев лучше, чем метод .on ('load') ? Заранее спасибо.

javascript,jquery,html,css,

0

Ответов: 0

html <link> и <script>, не работающие с jquery .on ('load') прослушиватель событий

В моем проекте я разрабатываю план выполнения загрузки страницы, например, Youtube. Для этого я собираю все яркие теги элементов, такие как img, iframe, видео, аудио и т. Д. И контролируя ширину полосы выполнения, когда и когда каждый из тегов загружается. Вы можете посмотреть на код ниже.

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);
        }
      }

Но проблема здесь в том, что я не могу отслеживать загрузку тегов ссылок и скриптов с помощью метода jquery .on ('load'), как и для img, тегов iframe и т. Д. Он работает, если я пишу встроенный атрибут onload чтобы связать теги, как показано ниже.

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

main.js

var loading = {"loaded" : 0};
function load() {
    console.log("hello");
    loading.loaded++;
    console.log(loading.loaded);
}

Как вы узнаете, очень тяжело писать встроенную нагрузку для каждого такого тега ссылки и скрипта, есть ли способ отслеживать загрузку тегов ссылок и сценариев лучше, чем метод .on ('load') ? Заранее спасибо.

00JavaScript, JQuery, HTML, CSS,
Похожие вопросы