冒着问一个愚蠢问题的风险，我会试一试。
是否可以在 RequireJs 加载依赖项时显示进度指示器？
例如：
require(['jquery'], function($) {
// Well, jQuery loaded in quite some time due to a low-speed connection
//
// Or maybe I wanted to show an overlay to prevent user of clicking on UI widgets until the load is complete
});
如果有一些插件没有出现在我的 Google 搜索中，我不想开始修改 RequireJS 源代码。
感谢你的帮助。
可以显示微调器或进度指示器，但不能显示栏本身。我可以获得 requirejs 的状态（当前正在加载或空闲），但不是加载/需要加载模块的百分比，因为它们的依赖关系在每个模块加载时都会被解析，但不是在开始时。
但是，无论如何，至少有一个简单的微调器的页面比用户等待时的空白页面要好得多。
无需更改requirejs！所以..
假设我们有文件 require.conf.js
require.config({...})
require(["app"], function () {
// main entry point to your hugde app's code
});
它是由html加载的
<script data-main="require.conf" type="text/javascript" src="bower_components/requirejs/require.js"></script>
这是标准的 requirejs 场景。让我们将指标添加到
<div id="requirejs-loading-panel">
<div id="requirejs-loading-status"></div>
<div id="requirejs-loading-module-name"></div>
</div>
好的，让我们赶上 requirejs 的 require.onResourceLoad 函数并完成所有需要的魔法。它将在每个模块加载时由 requirejs 调用，将 requirejs 的上下文与 dep 树和所有其他人员一起传递。我们将使用上下文来确定 requirejs 是否正在加载某些内容。我在预定的计时器调用中做到了，因为 onResourceLoad() 仅在加载时调用，而不是在加载完成时调用。这段代码需要添加到require.js.conf中：
require.onResourceLoad = function (context, map, depMaps) {
var loadingStatusEl = document.getElementById('requirejs-loading-status'),
loadingModuleNameEl = document.getElementById('requirejs-loading-module-name');
var panel = document.getElementById('requirejs-loading-panel');
if (loadingStatusEl && loadingModuleNameEl) {
if (!context) { // we well call onResourceLoad(false) by ourselves when requirejs is not loading anything => hide the indicator and exit
panel.style.display = "none";
return;
}
panel.style.display = ""; // show indicator when any module is loaded and shedule requirejs status (loading/idle) check
clearTimeout(panel.ttimer);
panel.ttimer = setTimeout(function () {
var context = require.s.contexts._;
var inited = true;
for (name in context.registry) {
var m = context.registry[name];
if (m.inited !== true) {
inited = false;
break;
}
} // here the "inited" variable will be true, if requirejs is "idle", false if "loading"
if (inited) {
require.onResourceLoad(false); // will fire if module loads in 400ms. TODO: reset this timer for slow module loading
}
}, 400)
if (map && map.name) { // we will add one dot ('.') and a currently loaded module name to the indicator
loadingStatusEl.innerHTML = loadingStatusEl.innerHTML += '.'; //add one more dot character
loadingModuleNameEl.innerHTML = map.name + (map.url ? ' at ' + map.url : '');
}
} else {
}
};
一个问题是：我们无法以某种方式确定需要加载多少模块，因此我们无法计算加载进度的实际百分比。但是，至少，我们可以找出我们是否正在加载某些东西（并且事件获取当前正在加载的模块名称）并将其展示给紧张的用户
从 v. 2.1.19 开始，RequireJS 具有onNodeCreatedconfig 属性。如果您为其分配一个函数，则每次将<script>元素附加到文档以加载模块时都会调用该函数。
该函数将提供node、config、moduleName和url参数。通过将事件侦听器附加到node，您可以检测脚本何时加载或加载失败。
现在您可以检测加载过程何时开始和停止，并可以使用该信息通知用户：
require.config({
/* ... paths, shims, etc. */
onNodeCreated: function(node, config, moduleName, url) {
console.log('module ' + moduleName + ' is about to be loaded');
node.addEventListener('load', function() {
console.log('module ' + moduleName + ' has been loaded');
});
node.addEventListener('error', function() {
console.log('module ' + moduleName + ' could not be loaded');
});
},
});
对于 IE < 9，您需要附加代码来附加事件侦听器。
注意：这仅适用于 RequireJS 直接请求的模块。插件（requirejs/text 等）每个都使用自己的加载机制，并且不会触发onNodeCreated. 一些触发器onXhr，onXhrComplete虽然，所以你也可以处理它们：
require.config({
/* ... paths, shims, etc. */
config: {
text: {
onXhr: function(xhr, url) {
console.log('file ' + url + ' is about to be loaded');
},
onXhrComplete: function(xhr, url) {
console.log('file ' + url + ' has been loaded');
}
}
}
});
不，这是不可能的。RequrieJs 通过在 DOM 中创建新的 script 标签来加载模块并监听 load 事件。在开始和结束加载之间没有更新事件。所以这不是 requireJs 的限制，而是 DOM 的限制。