我想显示用进度条加载的ajax响应的用户百分比.有没有办法实现它？现在我只是展示一张图片.
这是我的代码示例:
$('#loadingDiv').show();
$.ajax({
type : 'Get',
url : myUrl,
success : function(response) {
$('#loadingDiv').hide();
populateData(response);
},
error: function(x, e) {
$('#loadingDiv').hide();
if (x.status == 500 || x.status == 404) {
alert("no data found");
}
}
});
HTML代码:
<div id="loadingDiv">
<img src="loading-img.png"/>
</div>
我已经尽力将Angular 2的捆绑大小降低,并且使用Browserify+ Rollup+ Minify+ 将大小减小到~300kb(Angular 2 + jquery + bootstrap +其他一些小型第三方库)相对成功GZIP但是即便如此大小,下载捆绑包仍然需要一段时间,然后考虑到反射和zone.js的初始加载时间,这意味着在较慢的设备(手机)上加载时间可能需要4-5秒现场.
虽然我知道这是不可避免的(至少现在),有没有办法用下载百分比+ reflect/zone.js初始化来显示初始加载的加载进度？
大多数例子都是这样的:
<body>
<my-app>Loading...</my-app>
</body>
哪个工作正常,Loading...可以用微调器或任何可能选择的自定义模板替换,但有没有办法以有意义的方式获得实际进度？
我正在寻找的是类似于Gmail加载进度,这是一个具有最小/最大值的实际进度条而不是一些不确定的微调器,以便用户可以获得某种形式的指示,指示他们需要等待网站的时间长度加载.
提前谢谢了,
更新(2016年10月24日)
我已经开始使用NGC提前编译(https://angular.io/docs/ts/latest/cookbook/aot-compiler.html),它已经加快了相应的速度(虽然捆绑大小增加到〜 500kb压缩)但是在下载完所有内容后仍然需要大约300ms来加载网站.
理想情况下,我希望能够拦截下载和加载过程,调查它们的状态(例如,下载230kb/500kb或完成模块构建的10%),然后加载进度条和实际给出的状态栏向用户指示他们究竟在等什么.
我目前所拥有的是为进度条加载最小的CSS,显示它然后在onLoad函数上按顺序加载所有有角度的东西,虽然它比以前更平滑,但用户必须等待多长时间仍然不明显 - 根据互联网连接和设备的功能,是半秒到几秒.
冒问一个愚蠢的问题,我会尝试一下.
在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
});
我不想开始修改RequireJS源,如果有一些插件没有出现在我的谷歌搜索中.
感谢你的帮助.
问题是关于webpack.在将几乎所有内容打包到index.html中加载的单个bundle.js之后,bundle.js文件大约为2M并且需要几秒钟才能加载.
我想显示一个进度条,指示加载进度同时隐藏所有内容.只有在加载完成后才启用用户交互并显示内容,这正是Gmail正在使用的内容.
是否可以使用webpack来做到这一点？怎么样？
谢谢!
高级视图:我使用Emscripten将各种传统的C/C++代码库转换为优化的JavaScript,以便基于浏览器的现代用户库可以轻松利用其功能.到现在为止还挺好.但是,即使在网络传输压缩之后,Emscripten-transiled JS也会有点笨重.
为了改善用户体验,我想在主页加载后下载这个巨大的JS块,并且我想监视下载进度以显示在页面UI中.我知道有两种动态加载方法,我遇到了两个方面的缺点:
onload事件触发时,该文件被下载并准备运行.这种方法的问题是我找不到监视下载进度的方法.脚本对象确实有一个onprogress事件,但它似乎没有做任何事情(在Chrome中测试).eval()在下载的数据上运行JS 没有正确的效果(预期的函数不会显示在JS命名空间中).执行eval()更简单的带有JS的字符串具有预期的结果,所以我想知道eval()在Emscripten编译的代码上运行是否有一些特殊技巧.
相反,我已经实现了一种结合上述方法1和方法2的混合解决方案:XHR执行初始加载并丢弃数据.然后,页面创建一个脚本元素来加载相同的JS文件,该文件现在位于浏览器的缓存中并立即加载.但这显然是一个黑客,我不禁想到必须有一个更清洁的解决方案.
我编写了以下函数来处理 AJAX 请求以获取数据：
var xhr = createCORSRequest('GET', url);
if (!xhr) {
alert('CORS not supported');
return;
}
xhr.onload = function() {
var txt1 = xhr.responsetxt1;
var heading = getheading(txt1);
if (heading == 'PASS') {
var file = "My_URL" + ".js";
downloadFile(file);
//My code to display a progress bar here?
} else {
//Logic to handle failure to load
}
};
这是我downloadFile下载文件的功能。但是，我不明白如何：
如果您可以添加其工作原理的描述，那就太好了。谢谢。
function downloadFile(fileName) {
(function(d) {
var ref = d.getElementsByTagName('script')[0];
var js = d.createElement('script');
js.src = …所以我刚刚更新到 webpack 2 并进行了我的第一个工作设置，其中 webpack 通过查看 System.import 调用自动创建块。好甜！
但是，我使用 ajax 调用加载初始块，以便在加载时显示进度
所以我的问题是，我可以以某种方式覆盖或更改 System.import 的功能，以便它使用我可以侦听事件的 ajax 请求，而不是用<script>标签加载块吗？
javascript ×5
ajax ×3
progress-bar ×2
webpack ×2
android ×1
angular ×1
emscripten ×1
jquery ×1
requirejs ×1
webpack-2 ×1