文章/答案/技术大牛

发布

社区首页 >问答首页 >PreloadJS标记加载而不是xhr

问PreloadJS标记加载而不是xhr
EN

Stack Overflow用户

提问于 2016-08-22 15:03:47

回答 1查看 838关注 0票数 2

我正在使用预加载进行大型资产加载。我正在使用许多js库，比如60+ jquery。我只想要一个很好的加载器，它用进度条和清单文件显示资产的加载进度，这些进度条和列表文件已经成功加载，并且失败了。

我用简单的例子来显示我的问题。
以前，我使用new createjs.LoadQueue(true)加载内容，使用、XHR、，但与加载脚本的老式标记相比，XHR速度非常慢。根据文档，我希望切换到加载内容，使用基于标记的加载，而不是XHR，但我不知道如何加载。请看下面的代码

目标：

如何使用基于标签的加载?？
旧式的<script>标记会比预加载Is 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>

html

createjs

preloadjs

javascript

jquery

回答 1

Stack Overflow用户

发布于 2016-11-01 13:07:46

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

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>

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39082926

复制

相似问题

问PreloadJS标记加载而不是xhr
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问PreloadJS标记加载而不是xhrEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问PreloadJS标记加载而不是xhr
EN