javascript - 各リソース (すべてのスクリプト、CSS、画像など) のロードされたイベントをリッスンします。

Question

ページの読み込み中のすべてのリソースに基づいて、ページ読み込みのパーセンテージ バーに取り組んでいます。つまり、すべての画像、スクリプト、CSS などを監視し、その「読み込みイベント」を使用して、一般的なページ読み込みの割合を増やします。

一部の要素のロードされたイベントを監視するのが難しいいくつかの投稿を読んだので、私の質問はjavascript / jQueryを使用してそれを行う方法ですか? その結果を達成するためにどのような戦略を使用できますか?

このようなことを試してみましたが、実際にはうまく機能していません

function calc(element){
    console.log(element.outerHTML);
    progress++;
    var loadingStatus = ( progress * 100 / totalLength );
    console.log(loadingStatus);
    document.getElementById('loadingBar').style.width = loadingStatus+'%';
}

document.onreadystatechange = function(){
    if(document.readyState == "interactive"){

        progress = 0;
        var styleElements = document.querySelectorAll('style');
        var linkElements = document.querySelectorAll('link');
        var scriptElements = document.querySelectorAll('script[src]');
        var imgElements = document.querySelectorAll('img');
        totalLength = (styleElements.length + linkElements.length + scriptElements.length + imgElements.length);

        for(var i=0; i<styleElements.length; i++){
            styleElements[i].setAttribute('onload','calc(this);');
        }

        for(var i=0; i<linkElements.length; i++){
            var source = linkElements[i].href;
            linkElements[i].remove();
            var newLink = document.createElement('link');
            newLink.setAttribute('href', source);
            newLink.setAttribute('rel', 'stylesheet');
            newLink.setAttribute('onload','calc(this);');
            document.head.appendChild(newLink);
        }

        for(var i=0; i<scriptElements.length; i++){
            var source = scriptElements[i].src;
            scriptElements[i].remove();
            var newScript = document.createElement('script');
            newScript.setAttribute('src', source);
            newScript.setAttribute('onload','calc(this);');
            document.head.appendChild(newScript);
        }

        for(var i=0; i<imgElements.length; i++){
            imgElements[i].setAttribute('onload','calc(this);');
        }

    }
}

実際、このコードには次のような問題があります。

• リソース エラー (ロードの失敗、404 など) により、パーセンテージの計算が中断される
• <style><link>要素は、配置されている場所 (要素の後、要素の前など<script>)に応じて、パーセンテージ計算から無視されます。
• css リンクによって読み込まれたリソースが実際には認識されない

---

更新：いくつかのテストの後、要素（スクリプトなど）を削除して再読み込みすると、要素が2回実行されるため、これはすべて完全に役に立たないと考え始めました...

ソースコードをスキャンして置き換えて実行するのにドキュメント書き込みを使用することを考えていましたが、それは悪い考えであるだけでなく、本体の最後で実行する必要があるため(完全に取得するために)、おそらく不可能です。ページソース、頭+全身）、すべてのスクリプトとものがすでに実行されている場合...

だから..私は何をすべきかわかりません.おそらく、リソースの負荷に基づいてその進行状況バーを作成する方法はありませんよね?