Javascript 预加载JS标记而不是xhr_Javascript_Jquery_Html_Createjs_Preloadjs

Javascript 预加载JS标记而不是xhr

javascript jquery html

Javascript 预加载JS标记而不是xhr,javascript,jquery,html,createjs,preloadjs,Javascript,Jquery,Html,Createjs,Preloadjs,我正在使用大型资产加载。我使用了很多js库，比如60+jquery插件。我只是想要一个漂亮的加载程序，它显示了资产加载的进度，并显示了加载成功和失败的进度条和列表文件我用简单的例子来说明我的问题以前我使用new createjs.LoadQueue（true）使用XHR加载内容，但我发现XHR与老式的标签加载脚本相比速度非常慢。根据doc，我想切换到使用基于标签的加载来加载内容，而不是使用XHR，但我不知道如何加载。请参阅下面的代码目标： <!DOCTYPE html>

我正在使用大型资产加载。我使用了很多js库，比如60+jquery插件。我只是想要一个漂亮的加载程序，它显示了资产加载的进度，并显示了加载成功和失败的进度条和列表文件

我用简单的例子来说明我的问题
以前我使用
```
new createjs.LoadQueue（true）
```
使用XHR加载内容，但我发现XHR与老式的标签加载脚本相比速度非常慢。根据doc，我想切换到使用基于标签的加载来加载内容，而不是使用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>

如何使用基于标签的加载

老式的

标记加载脚本的速度是否比预加载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>


预载
//
变量清单=[{
“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）；
队列。setMaxConnections（5）；
queue.maintainScriptOrder=true；
queue.on（'progress'，函数（event）{
//当总体进度更改时激发
var值=queue.progress.toFixed（2）*100；
document.getElementById（'progress'）。innerHTML=value+'%'；
});
queue.on（'complete'，函数（事件）{
//在加载整个队列时激发
document.getElementById（'progress'）.innerHTML='100%-全部完成'；
});
queue.on（'error'，函数（事件）{
console.log（事件）；
});
装载清单（manifest）；

查看您的帖子后，我做了一些测试，并意识到，当使用

createjs.LoadQueue(false);

内容作为标题部分上的标记加载，因此，下面的代码

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>


标题

希望这对您的第一个问题有所帮助。

我在这里回答了这个问题：