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