controlProgressBar方法逻辑:
第一个if判断:参数为"none"时进这儿,传"none"值表示进度条一定存在,这里是想让进度条隐藏
第二个if判断:参数为"block"+进度条dom存在时进这儿,表示想让进度条显示,只需要改变其display属性
第三个判断:参数为"block"+进度条不存在时进这儿,不存在进度条dom要将dom元素添加进页面
//控制进度条的显示与隐藏 传值"none"/"block"
function controlProgressBar(status){
var ele = "progressOverlay";
var dom =
document.getElementById(ele) ||
window.parent.document.getElementById(ele) ||
window.parent.parent.document.getElementById(ele) ||
window.top.document.getElementById(ele) ||
$("iframe")
.contents()
.find("#" + ele)[0];
if (status === "none") {
$("#progressBar").progressbar("setValue",100)
progressTimer && clearInterval(progressTimer)
// 查询渲染完成 进度条隐藏
setTimeout(()=>{
dom.style.display = status;
},200)
}else if(dom){
// 查询渲染开始 显示进度条 并从0开始
dom.style.display = status;
$("#progressBar").progressbar("setValue",0)
// 获取进度条当前值
let progressValue = $("#progressBar").progressbar("getValue");
progressTimer && clearInterval(progressTimer)
progressTimer = setInterval(()=>{
if(progressValue < 90){
progressValue += Math.floor(Math.random() * 10);
progressValue = progressValue >= 100? 99:progressValue
// 设置进度条当前值
$("#progressBar").progressbar("setValue",progressValue)
}else{
clearInterval(progressTimer)
}
},200)
}else{
// 进度条没被渲染过
var loadingHtml = `<div id="progressOverlay" class="progressOverlay pageOverlay">
<div class="progressOverlay-cont">
<div id="progressBar" class="easyui-progressbar" style="width:100%;height:30px"></div>
<div class="progressOverlay-title">正在加载...</div>
<div class="progressOverlay-map-bg"></div>
</div>
</div>`;
// before方法 在被选中元素之前加入
$("#mapIframe").before(loadingHtml);
// 动态添加easyui组件 需要刷新
$.parser.parse($("#progressOverlay"));
let progressValue = $("#progressBar").progressbar("getValue");
progressTimer = setInterval(()=>{
if(progressValue < 90){
progressValue += Math.floor(Math.random() * 10);
progressValue = progressValue >= 100? 99:progressValue
$("#progressBar").progressbar("setValue",progressValue)
}else{
clearInterval(progressTimer)
}
},200)
}
}