PreloadJS標記加載而不是xhr

我正在使用preloadjs進行大型資產加載。我使用了很多js庫，比如60 + jquery插件。我只想要一個漂亮的加載器，顯示資源加載進度條和列表文件的成功加載和失敗的列表文件的進度。PreloadJS標記加載而不是xhr

我正在使用簡單的示例來顯示我的問題。
以前我使用new createjs.LoadQueue(true)加載內容使用XHR但我發現XHR與舊式標籤加載腳本相比非常慢。根據文檔，我想切換到加載內容使用基於標籤的加載而不是XHR，但我不知道如何。請參考下面

目標代碼：

如何使用基於標籤加載？
這是真的，老式<script>標籤將更快地加載腳本比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>

來源

2016-08-22 django

我在這裏回答了這個問題：https：//github.com/CreateJS/PreloadJS/issues/212 – Lanny

查看您的文章後，我做了一些測試，並意識到，使用時

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>

希望這與你幫助的第一個問題如下。

來源

2016-11-01 13:07:46

PreloadJS標記加載而不是xhr

回答

相關問題