[英]PreloadJS tag loading instead of xhr
I am using preloadjs for large asset loading. 我正在使用preloadjs进行大型资产加载。 I am using lots of js libraries like 60+ jquery plugins. 我正在使用许多js库,例如60多个jquery插件。 I just want a nice loader that displays progress of assets loading with progress bar and listing file which were loaded successfully and which were failed. 我只想要一个不错的加载器,以进度栏和清单文件显示资产加载的进度,这些文件已成功加载,但失败了。
new createjs.LoadQueue(true)
to load content using XHR But I find XHR very slow as compared to old-fashioned tags to load scripts. 以前,我使用new createjs.LoadQueue(true)
通过XHR加载内容,但是与老式标签加载脚本相比,我发现XHR非常慢。 As per doc, I want to switch to load content using tag-based loading instead of XHR but I cant figure out how. 根据文档,我想切换为使用基于标签的加载而不是XHR加载内容,但是我不知道该怎么做。 Please see the code below 请看下面的代码 Objective: 目的:
<script>
tags will load scripts faster than preloadjs XHR 是真的,老式的<script>
标签将比preload.js 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>
After viewing your post, I have done some tests and realized that, when using 查看您的帖子后,我做了一些测试,意识到使用
createjs.LoadQueue(false);
content is loaded as tags on HEADER section, so, the following code 内容作为标签加载到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' }
]);
will just create the following on 只会在
<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>
Hope this helps with you first question. 希望这对您的第一个问题有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.