PreloadJS標簽加載而不是xhr

Question

我正在使用preloadjs進行大型資產加載。 我正在使用許多js庫，例如60多個jquery插件。 我只想要一個不錯的加載器，以進度欄和清單文件顯示資產加載的進度，這些文件已成功加載，但失敗了。

我使用簡單的示例來顯示我的問題。
以前，我使用new createjs.LoadQueue(true)通過XHR加載內容，但是與老式標簽加載腳本相比，我發現XHR非常慢。 根據文檔，我想切換為使用基於標簽的加載而不是XHR加載內容，但是我不知道該怎么做。 請看下面的代碼

目的：

如何使用基於標簽的加載？
是真的，老式的<script>標簽將比preload.js 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>

Answer 1

查看您的帖子后，我做了一些測試，意識到使用

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>

希望這對您的第一個問題有所幫助。

PreloadJS標簽加載而不是xhr

問題描述

1 個解決方案

解決方案1
0 2016-11-01 13:07:46

PreloadJS標簽加載而不是xhr

問題描述

1 個解決方案

解決方案1 0 2016-11-01 13:07:46

解決方案1
0 2016-11-01 13:07:46