Экран загрузки JavaScript во время загрузки страницы
Это немного сложно объяснить, поэтому я постараюсь наилучшим образом
Поэтому, пока загружается страница HTML, я хочу, чтобы там был классный экран загрузки. Когда он закончит загрузку, я хочу, чтобы экран загрузки очистился и документ HTML был показан.
В принципе, я хочу Это:
CSS
/* Absolute Center CSS Spinner */
.loading {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.loading:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
}
/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
/* hide "loading..." text */
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.loading:not(:required):after {
content: '';
display: block;
font-size: 10px;
width: 1em;
height: 1em;
margin-top: -0.5em;
-webkit-animation: spinner 1500ms infinite linear;
-moz-animation: spinner 1500ms infinite linear;
-ms-animation: spinner 1500ms infinite linear;
-o-animation: spinner 1500ms infinite linear;
animation: spinner 1500ms infinite linear;
border-radius: 0.5em;
-webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}
/* Animation */
@-webkit-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
HTML:
<div class="loading">Loading…</div>
когда страница загружается. когда страница загружается, это очищается, а остальная часть документа HTML отображается. (Я делаю систему кредитов, и, в то время как загрузка кредитов мне действительно нужна, чтобы сказать, что она загружается, люди жалуются, что не могут щелкнуть что-либо, и я должен сказать им все, что она просто загружает)
Я бы хотел как можно больше держаться подальше от Ajax, так как я хотел бы изучить Javascript.
Ответы
Ответ 1
Вы можете подождать, пока тело не будет готово:
function onReady(callback) {
var intervalId = window.setInterval(function() {
if (document.getElementsByTagName('body')[0] !== undefined) {
window.clearInterval(intervalId);
callback.call(this);
}
}, 1000);
}
function setVisible(selector, visible) {
document.querySelector(selector).style.display = visible ? 'block' : 'none';
}
onReady(function() {
setVisible('.page', true);
setVisible('#loading', false);
});
body {
background: #FFF url("https://i.imgur.com/KheAuef.png") top left repeat-x;
font-family: 'Alex Brush', cursive !important;
}
.page { display: none; padding: 0 0.5em; }
.page h1 { font-size: 2em; line-height: 1em; margin-top: 1.1em; font-weight: bold; }
.page p { font-size: 1.5em; line-height: 1.275em; margin-top: 0.15em; }
#loading {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background-color: rgba(192, 192, 192, 0.5);
background-image: url("https://i.stack.imgur.com/MnyxU.gif");
background-repeat: no-repeat;
background-position: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Alex+Brush" rel="stylesheet">
<div class="page">
<h1>The standard Lorem Ipsum passage</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="loading"></div>
Ответ 2
В начале вашего скрипта загрузки просто сделайте
отображается через css [display:block;] и делает остальную часть страницы невидимой через css [display:none;].
Как только загрузка будет завершена, просто сделайте загрузку невидимой, и страница снова станет видимой с той же техникой. Вы можете использовать document.getElementById(), чтобы выбрать div, которые вы хотите изменить отображение.
Изменение: вот как бы это выглядело. Когда тело завершит загрузку, оно вызовет функцию javascript, которая изменит значения отображения различных элементов. По умолчанию ваш стиль должен быть таким, чтобы страница не видна при загрузке.
<head>
<style>
#page{
display: none;
}
#loading{
display: block;
}
</style>
<script>
function myFunction()
{
document.getElementById("page").style.display = "block";
document.getElementById("loading").style.display = "none";
}
</script>
</head>
<body onload="myFunction()">
<div id="page">
</div>
<div id="loading">
</div>
</body>
Ответ 3
Для дальнейшего использования части ajax, которую вы можете или не можете использовать (из комментариев)
простой способ загрузить другую страницу и заменить ее на ваш текущий:
<script>
$(document).ready( function() {
$.ajax({
type: 'get',
url: 'http://pageToLoad.from',
success: function(response) {
// response = data which has been received and passed on to the 'success' function.
$('body').html(response);
}
});
});
<script>
Ответ 4
Я бы предложил добавить класс no-js в ваш html, чтобы вложить в него селектора CSS, например:
.loading {
display: none;
}
.no-js .loading {
display: block;
//....
}
и когда вы закончите загрузку своего кредитного кода, удалите его:
$('html').removeClass('no-js');
Это скроет ваш загрузочный счетчик, так как нет класса no-js в html, это означает, что вы уже загрузили свой кредитный код
Ответ 5
Если на вашем сайте у вас есть ajax-вызовы, загружающие некоторые данные, и это причина медленной загрузки страницы, лучшее решение, которое я нашел, - это
$(document).ajaxStop(function(){
alert("All AJAX requests completed");
});
https://jsfiddle.net/44t5a8zm/ - здесь вы можете добавить несколько вызовов ajax и протестировать его.
Ответ 6
Этот метод использует WindowOrWorkerGlobalScope.setInterval (https://developer.mozilla.org/en-US/doc)
метод для отслеживания состояний готовности документа & посмотрите, существует ли элемент <body>.
// Function > Loader Screen Script
(function LoaderScreenScript(window = window, document = window.document, undefined = window.undefined || void 0) {
// Initialization > (Processing Time, Condition, Timeout, Loader (...))
let processingTime = 0,
condition = function() {
// Return
return document.body
},
timeout = function() {
// Return
return (processingTime * 1e3) / 2
},
loaderScreenFontSize = typeof window.loaderScreenFontSize != 'undefined' ? window.loaderScreenFontSize : 14,
loaderScreenMargin = typeof window.loaderScreenMargin != 'undefined' ? window.loaderScreenMargin : 10,
loaderScreenMessage = typeof window.loaderScreenMessage != 'undefined' ? window.loaderScreenMessage : 'Loading, please wait…',
loaderScreenOpacity = typeof window.loaderScreenOpacity != 'undefined' ? window.loaderScreenOpacity : .75,
loaderScreenTransition = typeof window.loaderScreenTransition != 'undefined' ? window.loaderScreenTransition : .675,
loaderScreenWidth = typeof window.loaderScreenWidth != 'undefined' ? window.loaderScreenWidth : 7.5;
// Function > Update
function update() {
// Set Timeout
setTimeout(function() {
// Initialization > (Data, Metadata)
var data = document.createElement('loader-screen-element'),
metadata = setInterval(function() {
/* Logic
[if:else if:else statement]
*/
if (document.readyState == 'complete') {
// Alpha
alpha();
// Test
test()
}
});
// Insertion
document.body.appendChild(data);
// Style > <body> > Overflow
document.body.style = ('overflow: hidden !important; pointer-events: none !important; user-drag: none !important; user-select: none !important;' + (document.body.getAttribute('style') || ' ')).trim();
// Modification > Data
// Inner HTML
data.innerHTML =
'<style media=all type=text/css>' +
'body::selection {' +
'background-color: transparent !important;' +
'text-shadow: none !important' +
'} ' +
'@keyframes rotate {' +
'0% { transform: rotate(0) }' +
'to { transform: rotate(360deg) }' +
'}' +
'</style>' +
"<div style='animation: rotate 1s ease-in-out 0s infinite backwards; border: " + loaderScreenWidth + "px solid rgba(0, 0, 0, " + loaderScreenOpacity + "); border-top-color: rgba(0, 51, 255, " + loaderScreenOpacity + "); border-radius: 50%; height: 75px; margin: 0 auto; margin-bottom: " + loaderScreenMargin + "px; width: 75px'> </div>" +
"<small style='color: rgba(127, 127, 127, .675); font-family: \"Open Sans\", \"Calibri Light\", Calibri, sans-serif; font-size: " + loaderScreenFontSize + "px !important; margin: 0 auto; margin-top: " + loaderScreenMargin + "px; text-align: center'> " + loaderScreenMessage + " </small>";
// Style
data.style = 'align-items: center; background-color: rgba(255, 255, 255, .98); display: flex; flex-direction: column; height: ' + innerHeight + 'px; justify-content: center; left: 0; margin: auto; max-height: 100% !important; max-width: 100% !important; min-height: 100vh; min-width: 100vh; position: fixed; top: 0; transition: ' + loaderScreenTransition + ease-in-out; width: ' + innerWidth + 'px; z-index: 2147483647';
// Function
// Alpha
function alpha() {
// Clear Interval
clearInterval(metadata)
};
// Test
function test() {
// Style > Data
// Background Color
data.style.backgroundColor = 'transparent';
// Opacity
data.style.opacity = 0;
// Set Timeout
setTimeout(function() {
// Deletion
data.remove();
// Modification > <body> > Style
document.body.style = document.body.getAttribute('style').replace('overflow: hidden !important;', '').replace('pointer-events: none !important;', '').replace('user-drag: none !important;', '').replace('user-select: none !important;', '');
(document.body.getAttribute('style') || '').trim() || document.body.removeAttribute('style')
}, ((+getComputedStyle(data).getPropertyValue('animation-delay').replace(/[a-zA-Z]/g, '').trim() + +getComputedStyle(data).getPropertyValue('animation-duration').replace(/[a-zA-Z]/g, '').trim() + +getComputedStyle(data).getPropertyValue('transition-delay').replace(/[a-zA-Z]/g, '').trim() + +getComputedStyle(data).getPropertyValue('transition-duration').replace(/[a-zA-Z]/g, '').trim()) * 1e3) + 100);
}
}, timeout())
};
/* Logic
[if:else if:else statement]
*/
if (condition())
// Update
update();
else {
// Initialization > Data
var data = setInterval(function() {
/* Logic
[if:else if:else statement]
*/
if (condition()) {
// Update > Processing Time
processingTime += 1;
// Update
update();
// Metadata
metadata()
}
});
// Function > Metadata
function metadata() {
// Clear Interval
clearInterval(data);
/* Logic
[if:else if:else statement]
> Deletion
*/
if ('data' in window && typeof data == 'undefined')
delete window.data
}
}
})(window, window.document, window.undefined || void 0)
Этот экран предварительной загрузки был сделан Lapys @https://github.com/LapysDev
