I am using preloadjs for large asset loading. I am using lots of js libraries like 60+ jquery plugins. 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. As per doc, I want to switch to load content using tag-based loading instead of XHR but I cant figure out how. Please see the code below Objective:
<script>
tags will load scripts faster than 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>
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
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.