H5-处理未加载过资源-展示loading页面
<#--处理未加载过资源，展示loading 开始-->
<div id="whiteScreen" class="change-view-terminal"
style="visibility: hidden; position: fixed;z-index: 1001;opacity: .95;filter: alpha(opacity=95);margin: 0;bottom: 0;
top: 0; left: 0;right: 0;border-radius: 0;display: -webkit-box; -webkit-box-pack: center;-webkit-box-align:
center;background-color: white;">
<div>
<img src='/img/head-guilian.gif' style="width: 65px;height: 65px; display: block;margin: 0 auto;"/>
<div style="color: black;font-size: 18px">努力加载中<span id="whiteScreenWait">...</span></div>
</div>
<script>
// 请求某个资源，超过0.15秒，就是未缓存
function hasLoadResource(uri) {
let startR = new Date().getTime();
let hasLoadResourceFlag = false;
let hasLoadResourceFlagTimeout = 15;//毫秒 正常是15毫秒内，具体再看
$.ajax({
url: uri, //使用相对不稳定的资源更好，文件本身运行被缓存
async: false,
type: "GET",
cache: true,
timeout: hasLoadResourceFlagTimeout,//毫秒 根据具体文件大小来
complete: function () {
let endR = new Date().getTime();
let number = endR - startR;
hasLoadResourceFlag = number < hasLoadResourceFlagTimeout;
console.log("请求耗时：" + number + ",标记为" +( hasLoadResourceFlag ? "有缓存" : "无缓存"));
}
});
return hasLoadResourceFlag;
}
let hasLoadResourceFlag = hasLoadResource("/tolocal/en_US.dic");//使用相对不稳定的资源更好，文件本身运行被缓存
if (!hasLoadResourceFlag) {
var whiteScreenId = document.getElementById("whiteScreen");
whiteScreenId.style.visibility = 'visible';
console.log("未缓存过页面，开始加载load...");
let hasCloseWhiteScreen = false;
let whiteScreenWaitCount = 0;
let whiteScreenWaitCountMax = 4;
let whiteScreenWaitStr = "";
let whiteScreenWait = document.getElementById("whiteScreenWait");
let whiteScreenWaitInterval = setInterval(function () {
if (whiteScreenWaitCount > whiteScreenWaitCountMax) {
whiteScreenWaitCount = 1;
whiteScreenWaitStr = ".";
} else {
whiteScreenWaitStr += ".";
whiteScreenWaitCount++;
}
whiteScreenWait.innerText = whiteScreenWaitStr;
}, 300);
function closeWhiteScreen(isNow) {
if (!!isNow) {
if (hasCloseWhiteScreen) {
return;
}
whiteScreenId.style.visibility = 'hidden';
hasCloseWhiteScreen = true;
clearInterval(whiteScreenWaitInterval);
console.log("立即关闭白屏");
} else {
setTimeout(function () {
if (hasCloseWhiteScreen) {
return;
}
whiteScreenId.style.visibility = 'hidden';
console.log("超时关闭白屏");
hasCloseWhiteScreen = true;
clearInterval(whiteScreenWaitInterval);
}, 1500);
}
}
closeWhiteScreen(false);
}else {
console.log("已缓存过页面");
}
</script>
</div>
<#--处理未加载过资源，展示loading 结束-->
正文到此结束
- 本文标签： Spring 前端 JavaScript
- 本文链接： https://code.jiangjiesheng.cn/article/113
- 版权声明： 本文由小江同学原创发布，转载请先联系本站长，谢谢。
热门推荐
相关文章
近期评论
-
来自： 留言板
-
来自： 留言板
-
来自： js-处理网页图片宽度自适应屏幕宽度
-
来自： 留言板
-
来自： SpringBoot-线上服务卡死卡顿分析-http请求进不去服务-调整tomcat-undertow线程数
