Question

我正在使用preloadjs进行大量资源加载。我正在使用大量的js库，如60+ jquery插件。我只想要一个漂亮的加载器，它显示加载资源的进度，进度条和列表文件已成功加载，哪些失败。

我使用简单的示例来显示我的问题。
以前我使用new createjs.LoadQueue(true)使用 XHR 加载内容但是我觉得XHR与加载脚本的老式标签相比非常慢。根据文档，我想切换到使用基于标记的加载而不是XHR加载内容，但我无法弄清楚如何。请参阅以下代码

目的：

如何使用基于标签的加载??
老式的<script>标签是否会比preloadjs XHR更快地加载脚本

CODE：

<!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 个答案: