Как отображать экран загрузки при загрузке контента сайта
Я работаю над сайтом, который содержит целую кучу mp3 и изображений, и я хотел бы отображать загружаемый gif, пока загружается весь контент.
Я понятия не имею, как этого добиться, но у меня есть анимированный gif, который я хочу использовать.
Какие-либо предложения?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 7
Обычно сайты, которые делают это, загружая контент через ajax и прослушивая событие readystatechanged, чтобы обновить DOM загружаемым GIF или контентом.
Как вы сейчас загружаете свой контент?
Код будет похож на этот:
function load(url) {
// display loading image here...
document.getElementById('loadingImg').visible = true;
// request your data...
var req = new XMLHttpRequest();
req.open("POST", url, true);
req.onreadystatechange = function () {
if (req.readyState == 4 && req.status == 200) {
// content is loaded...hide the gif and display the content...
if (req.responseText) {
document.getElementById('content').innerHTML = req.responseText;
document.getElementById('loadingImg').visible = false;
}
}
};
request.send(vars);
}
Существует множество сторонних библиотек javascript, которые могут облегчить вашу жизнь, но это действительно все, что вам нужно.
Вы сказали, что не хотите делать это в AJAX. Хотя AJAX отлично подходит для этого, есть способ показать один DIV, ожидая загрузки всего <body>. Это выглядит примерно так:
<html>
<head>
<style media = "screen" type = "text/css">
.layer1_class { position: absolute; z-index: 1; top: 100px; left: 0px; visibility: visible; }
.layer2_class { position: absolute; z-index: 2; top: 10px; left: 10px; visibility: hidden }
</style>
<script>
function downLoad(){
if (document.all){
document.all["layer1"].style.visibility = "hidden";
document.all["layer2"].style.visibility = "visible";
} else if (document.getElementById){
node = document.getElementById("layer1").style.visibility='hidden';
node = document.getElementById("layer2").style.visibility='visible';
}
}
</script>
</head>
<body onload = "downLoad()">
<div id = "layer1" class = "layer1_class">
<table width = "100%">
<tr>
<td align = "center"><strong><em>Please wait while this page is loading...</em></strong></p></td>
</tr>
</table>
</div>
<div id = "layer2" class = "layer2_class">
<script type = "text/javascript">
alert('Just holding things up here. While you are reading this, the body of the page is not loading and the onload event is being delayed');
</script>
Final content.
</div>
</body>
</html>
Событие onload не сработает, пока не загрузится вся страница. Таким образом, layer2 <DIV> не будет отображаться до тех пор, пока страница не завершит загрузку, после чего запустится onload.
Этот метод на самом деле работает очень хорошо, и IMO всегда лучше избегать загрузки специальной библиотеки для вещей, которые легко сделать с максимальной совместимостью с браузером, подобной этой. Я делаю нечто подобное, но обычно оформляю свой загружаемый контент как «display: block», а затем последнее, что я делаю, когда все остальные задачи «onload» выполнены, переключаю его стиль на «display: none». Таким образом, я могу добавить загружаемый контент, вообще не изменяя исходный стиль страницы. Я предполагаю, что display: none означает, что он не будет работать с IE <8, но всегда есть обходной путь. :-)
На самом деле есть довольно простой способ сделать это. Код должен быть примерно таким:
<script type = "test/javascript">
function showcontent(x){
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 1) {
document.getElementById('content').innerHTML = "<img src='loading.gif' />";
}
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('content').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('POST', x+'.html', true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send(null);
}
И в HTML:
<body onload = "showcontent(main)"> <!-- onload optional -->
<div id = "content"><img src = "loading.gif"></div> <!-- leave img out if not onload -->
</body>
Я сделал что-то подобное на своей странице, и он отлично работает.
Вы можете использовать элемент <progress> в HTML5. Смотрите на этой странице исходный код и живую демонстрацию. http://purpledesign.in/blog/super-cool-loading-bar-html5/
вот элемент прогресса ...
<progress id = "progressbar" value = "20" max = "100"></progress>
это будет иметь значение загрузки, начиная с 20. Конечно, одного элемента будет недостаточно. Вам нужно перемещать его по мере загрузки скрипта. Для этого нам понадобится JQuery. Вот простой сценарий JQuery, который запускает прогресс от 0 до 100 и делает что-то в определенный временной интервал.
<script>
$(document).ready(function() {
if (!Modernizr.meter){
alert('Sorry your brower does not support HTML5 progress bar');
} else {
var progressbar = $('#progressbar'),
max = progressbar.attr('max'),
time = (1000/max)*10,
value = progressbar.val();
var loading = function() {
value += 1;
addValue = progressbar.val(value);
$('.progress-value').html(value + '%');
if (value == max) {
clearInterval(animate);
//Do Something
}
if (value == 16) {
//Do something
}
if (value == 38) {
//Do something
}
if (value == 55) {
//Do something
}
if (value == 72) {
//Do something
}
if (value == 1) {
//Do something
}
if (value == 86) {
//Do something
}
};
var animate = setInterval(function() {
loading();
}, time);
};
});
</script>
Добавьте это в свой HTML-файл.
<div class = "demo-wrapper html5-progress-bar">
<div class = "progress-bar-wrapper">
<progress id = "progressbar" value = "0" max = "100"></progress>
<span class = "progress-value">0%</span>
</div>
</div>
Надеюсь, это послужит вам началом.
Как насчет jQuery? Просто...
$(window).load(function() { //Do the code in the {}s when the window has loaded
$("#loader").fadeOut("fast"); //Fade out the #loader div
});
А HTML ...
<div id = "loader"></div>
И CSS ...
#loader {
width: 100%;
height: 100%;
background-color: white;
margin: 0;
}
Затем в загрузчик div вы поместите GIF и любой желаемый текст, и он исчезнет, как только страница загрузится.
Сначала настройте загрузочное изображение в div. Затем получите элемент div. Затем установите функцию, которая редактирует CSS, чтобы сделать видимость «скрытой». Теперь в <body> поместите onload в имя функции.
# Чистый метод css
Place this at the top of your code (before header tag)
<style> .loader {
position: fixed;
background-color: #FFF;
opacity: 1;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 10;
}
</style><div class = "loader">
Your Content For Load Screen
</div>And This At The Bottom after all other code (except /html tag)
<style>
.loader {
-webkit-animation: load-out 1s;
animation: load-out 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes load-out {
from {
top: 0;
opacity: 1;
}
to {
top: 100%;
opacity: 0;
}
}
@keyframes load-out {
from {
top: 0;
opacity: 1;
}
to {
top: 100%;
opacity: 0;
}
}
</style>This always works for me 100% of the time
Подскажите, пожалуйста, какие сторонние библиотеки?