サイト読み込みスクリプトとライブラリの進捗状況を取得する

私は自分のWebサイトで使用しているスクリプトやライブラリをかなりたくさん持っています。これには5〜8秒かかることがあります。 ex。サイト読み込みスクリプトとライブラリの進捗状況を取得する

<script type="text/javascript" src="../lib_components/jquery/dist/jquery.min.js"></script> 
<script type="text/javascript" src="../lib_components/bootstrap/dist/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="../lib_components/angular/angular.js"></script> 
<script type="text/javascript" src="../lib_components/angular-resource/angular-resource.min.js"></script> 
<script type="text/javascript" src="../lib_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script> 
<script type="text/javascript" src="../lib_components/angular-cookies/angular-cookies.min.js"></script> 
<script type="text/javascript" src="../lib_components/angular-ui-router/release/angular-ui-router.min.js"></script> 
<script type="text/javascript" src="../lib_components/lodash/dist/lodash.min.js"></script> 
<script type="text/javascript" src="../scripts/js/overdo.js"></script>

私は、誰もがそのために実行する必要がいただきました！に私を導くことができ、すべてのスクリプトがロードされているまでのローディングバーを表示したいですか？

出典

2016-05-22 Jimq

これらのスクリプトタグが読み込まれるには5〜8秒かかることがどのようにわかりますか？非常に長い時間のように聞こえて、ページ読み込みの他の部分とスクリプトの読み込み時間を混同している可能性が高い – charlietfl

最小帯域幅200kbsのユーザーのためにチェックを実行しました;） – Jimq

あなたの例のように、ロードしたいすべてのスクリプトが同期してロードされている（モジュールローダー、非同期属性などを使用していない）場合に使用できる非常に簡単な方法があります。

トリックは、すべての重いスクリプトの前に、進捗インジケータスクリプト非常に最初のを追加します。それは（それが理想的に大きすぎるすべきではないので）も、このスクリプトをインライン化しても意味がある：

今

<script> 
// some progress bar implementation progress.show() 
console.log('showing progress, loading bar, etc.'); 
</script> 

<script src="../lib_components/jquery/dist/jquery.min.js"></script> 
<script src="../lib_components/bootstrap/dist/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="../lib_components/angular/angular.js"></script> 
<script src="../lib_components/angular-resource/angular-resource.min.js"></script> 
<script src="../lib_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script> 
<script src="../lib_components/angular-cookies/angular-cookies.min.js"></script> 
<script src="../lib_components/angular-ui-router/release/angular-ui-router.min.js"></script> 
<script src="../lib_components/lodash/dist/lodash.min.js"></script> 
<script src="../scripts/js/overdo.js"></script> 

<script> 
// hiding loading bar 
console.log('scripts loaded') 
</script>

、実際のプログレスバーの実装のために、それがどのように、何レンダリングするためにあなた次第です。ただし、それらのスクリプトをどこに置くかによっては、DOMツリーがまだロードされていない可能性があります（スクリプトが<head>の場合）。私はとにかく</body>を閉じる前にスクリプトを置くことを勧めます。このアプローチの理想的な構造は次のとおりです。

<!DOCTYPE html> 
<html> 
<head> 
    <!-- some styles, no scripts here --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
    <link rel="stylesheet" href="assets/styles.css" /> 
</head> 
<body> 

    <div class="loading" hidden>Loading...</div> 

    <!-- Some application HTML code --> 

    <script> 
    // show/create progress/loading 
    var loading = document.querySelector('.loading') 
    loading.hidden = false 
    </script> 

    <!-- many script tags ... --> 
    <!-- ... --> 

    <script> 
    // hide/remove progress/loading 
    loading.parentNode.removeChild(loading) 
    </script> 

</body> 
</html>

出典

2016-05-22 09:44:12 dfsq

ありがとうございました!!! – Jimq

サイト読み込みスクリプトとライブラリの進捗状況を取得する

答えて

関連する問題