Загрузка preloadJS вместо xhr

Я использую preloadjs для загрузки больших активов. Я использую много js-библиотек, таких как 60+ jquery-плагинов. Мне просто нужен хороший загрузчик, который отображает ход загрузки активов с индикатором выполнения и листинговым файлом, которые были успешно загружены, а какие были неудачными.Загрузка preloadJS вместо xhr

Я использую простой пример для отображения моей проблемы.
Раньше я использовал new createjs.LoadQueue(true) для загрузки содержимого с помощью XHR Но я нахожу XHR очень медленным, по сравнению с старомодными тегами для загрузки скриптов. В соответствии с документом, я хочу переключиться на загрузку контента, используя с тегом на основе загрузки вместо XHR, но я не могу понять, как это сделать. Пожалуйста, смотрите ниже код

Цель:

Как использовать тег на основе загрузки ??
Верно ли, что старомодные <script> теги будут загружать скрипты быстрее, чем preloadjs 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>

источник

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

ответ

Смежные вопросы