[英]How to delay the loading of html body from head section?
In my html
file's head section, I've added a library testLibrary.js
and in that js
file, I'm asking for a response from server side.在我的html
文件的 head 部分中,我添加了一个库testLibrary.js
,在该js
文件中,我要求服务器端做出响应。 Is there a way to load the body after I get the response?收到回复后有没有办法加载正文?
This is my html
head:这是我的html
头:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
<title>Test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://*****.com/js/testLibrary.js"></script>
</head>
Inside the testLibrary.js
I'm doing this:在testLibrary.js
,我正在这样做:
$(document).ready(function () {
$.get(host+ "/ws/getInfo?pid=" + id, function (data, status) {
try {
if (data[0].status == "VALID") {
//let the body load
} else {
// redirect to somewhere else
}
} catch (e) {
console.log(e);
}
});
});
I want the body to stop loading before I get response
and verify.我希望正文在得到response
和验证之前停止加载。 Is it possible to do?有可能吗? Or is there a way around?或者有什么办法吗? The library can be used by anyone so I won't have the control of body.该库可供任何人使用,因此我无法控制身体。
Add a pre-loader to full screen with overlay before server-side call is started and while the call is being processed, on success replace your content and remove the overlay loader.在服务器端调用开始之前和处理调用时,将预加载器添加到全屏覆盖,成功替换您的内容并删除覆盖加载器。
$body = $("body");
$(document).on({
ajaxStart: function() { $body.addClass("loading"); },
ajaxStop: function() { $body.removeClass("loading"); }
});
Add the HTML element at the bottom:在底部添加 HTML 元素:
<div class="modal"><!-- Place at bottom of page --></div>
And the CSS: CSS:
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 )
url('http://i.stack.imgur.com/FhHRx.gif')
50% 50%
no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading .modal {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modal {
display: block;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.