下载进度条实现思路
html/ajax
var url = "img/01.png"; $.ajax({ type: 'GET', dataType: 'json', url: url, cache: false, xhr: function() { var xhr = new window.XMLHttpRequest(); //Download progress xhr.addEventListener("progress", function(evt) { if(evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; console.log(Math.round(percentComplete * 100) + "%"); } }, false); return xhr; }, beforeSend: function() {}, complete: function() {}, success: function(result) {} });
H5+
var url = ""; var options = {method: "GET"}; dtask = plus.downloader.createDownload(url, options); dtask.addEventListener("statechanged", function(task, status) { switch(task.state) { case 1: // 开始 break; case 2: //已连接到服务器 break; case 3: // 已接收到数据 var current = parseInt(100 * task.downloadedSize / task.totalSize); console.log(current); break; case 4: // 下载完成 plus.notification.compProgressNotification("下载完成");//插件调用 plus.runtime.install(plus.io.convertLocalFileSystemURL(task.filename), //安装APP { force: true }, function() { }, function() { mui.toast('安装失败'); }); break; } }); dtask.start();
uni.app
https://uniapp.dcloud.io/api/request/network-file
未完成待续