可以显示旋转指示器或进度指示器,但不能显示进度条本身。我可以获取requirejs的状态(当前正在加载或空闲),但无法获取已加载/需要加载模块的%,因为它们的依赖关系在每个模块加载时解析,而不是在开始时。
但是,无论如何,页面上至少有一个简单的旋转指示器要比只有空白页面更好,这样用户就不至于无聊等待。
不需要对requirejs进行任何更改!
假设我们有一个名为require.conf.js的文件
require.config({...})
require(["app"], function () {
});
它是通过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都会调用它,并传递带有dep树和其他所有内容的requirejs上下文。我们将使用上下文来判断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) {
panel.style.display = "none";
return;
}
panel.style.display = "";
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;
}
}
if (inited) {
require.onResourceLoad(false);
}
}, 400)
if (map && map.name) {
loadingStatusEl.innerHTML = loadingStatusEl.innerHTML += '.';
loadingModuleNameEl.innerHTML = map.name + (map.url ? ' at ' + map.url : '');
}
} else {
}
};
一个问题是:我们无法确定需要加载多少模块,因此无法计算实际的加载进度百分比。但是,至少我们可以找出是否正在加载某些内容(并获取当前正在加载的模块名称),并将其显示给紧张的用户。