2

大規模なアセットの読み込みにpreloadjsを使用しています。私は 60 以上の jquery プラグインのような多くの js ライブラリを使用しています。アセットのロードの進行状況をプログレスバーとリストファイルで表示し、正常にロードされたものと失敗したものを表示する素敵なローダーが欲しいだけです。

  • 簡単な例を使用して問題を表示しています。
  • 以前はXHRnew createjs.LoadQueue(true)を使用してコンテンツをロードしていましたが、スクリプトをロードするための昔ながらのタグと比較して、XHR は非常に遅いことがわかりました。ドキュメントに従って、XHR の代わりにタグベースの読み込みを使用してコンテンツを読み込むように切り替えたいのですが、方法がわかりません。以下のコードをご覧ください

目的：

  1. タグベースの読み込みを使用する方法??
  2. 旧式の<script>タグが preloadjs XHR よりも速くスクリプトをロードするというのは本当ですか?

コード：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>preloadjs </title>
    <script src="https://code.createjs.com/preloadjs-0.6.2.min.js" type="text/javascript"></script>
    <script id="1" type="text/javascript"></script>
    <script id="2" type="text/javascript"></script>
    <script id="3" type="text/javascript"></script>
    <script id="4" type="text/javascript"></script>
    <script id="5" type="text/javascript"></script>
</head>
<body>
    <div id="progress"> </div>
    <script type="text/javascript">
        //
        var manifest = [{
            "src": "https://code.jquery.com/jquery-1.12.4.min.js",
            "id": "1"
        }, {
            "src": "https://code.jquery.com/ui/1.11.3/jquery-ui.min.js",
            "id": "2"
        }, {
            "src": "https://code.jquery.com/ui/1.11.3/FAIL-IT.js",
            "id": "3"
        }, {
            "src": "https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js",
            "id": "4"
        }, {
            "src": "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js",
            "id": "5"
        }];
        //
        var queue = new createjs.LoadQueue(false);
        queue.setMaxConnections(5);
        queue.maintainScriptOrder = true;
        queue.on('progress', function(event) {
            //fired when the overall progress changes
            var value = queue.progress.toFixed(2) * 100;
            document.getElementById('progress').innerHTML = value + '%';
        });
        queue.on('complete', function(event) {
            //fired when the entire queue has been loaded
            document.getElementById('progress').innerHTML = '100% - all done';
        });
        queue.on('error', function(event) {
            console.log(event);
        });
        queue.loadManifest(manifest);
    </script>
</body>
</html>
4

1 に答える 1

0

あなたの投稿を見た後、いくつかのテストを行ったところ、

createjs.LoadQueue(false);

コンテンツは HEADER セクションのタグとして読み込まれるため、次のコード

loader = new createjs.LoadQueue(false);
loader.loadManifest([
            { type: createjs.AbstractLoader.CSS, src: '/node_modules/material-design-icons/iconfont/material-icons.css'},
            { type: createjs.AbstractLoader.CSS, src: '/node_modules/materialize-css/dist/css/materialize.css'},
            { type: createjs.AbstractLoader.CSS, src: '/styles.css'},
            { type: createjs.AbstractLoader.JAVASCRIPT, src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js' }
        ]);

に以下を作成するだけです

<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="/node_modules/material-design-icons/iconfont/material-icons.css">
<link rel="stylesheet" type="text/css" href="/node_modules/materialize-css/dist/css/materialize.css">
<link rel="stylesheet" type="text/css" href="/styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

これが最初の質問に役立つことを願っています。

于 2016-11-01T13:07:46.473 に答える