Jak wyświetlić ekran ładowania podczas ładowania zawartości witryny
Pracuję nad stroną, która zawiera całą masę plików MP3 i obrazów, i chciałbym wyświetlić ładujący się gif podczas ładowania całej zawartości.
Nie mam pojęcia, jak to osiągnąć, ale mam animowany gif, którego chcę użyć.
Jakieś sugestie?
7 answers
Zazwyczaj strony, które to robią, ładując zawartość za pomocą ajax i nasłuchując zdarzenia readystatechanged, aby zaktualizować DOM za pomocą ładowania GIF lub zawartość.
Jak aktualnie ładujesz swoje treści?
Kod byłby podobny do tego:
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);
}
Istnieje wiele bibliotek javascript innych firm, które mogą ułatwić Ci życie, ale powyższe jest naprawdę wszystko, czego potrzebujesz.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-25 14:05:31
Mówiłeś, że nie chcesz tego robić w Ajaxie. Chociaż AJAX jest do tego świetny, istnieje sposób, aby pokazać jeden DIV, czekając na załadowanie całego <body>. Chodzi o coś takiego:
<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>
Zdarzenie onload nie zostanie uruchomione, dopóki nie załaduje się cała strona. Tak więc layer2 <DIV> będzie wyświetlany dopiero po zakończeniu ładowania strony, po czym zostanie uruchomiony program onload.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-11-04 19:43:43
A co z jQuery? Proste...
$(window).load(function() { //Do the code in the {}s when the window has loaded
$("#loader").fadeOut("fast"); //Fade out the #loader div
});
I HTML...
<div id="loader"></div>
I CSS...
#loader {
width: 100%;
height: 100%;
background-color: white;
margin: 0;
}
Następnie w Twoim loaderze div umieścisz GIF i dowolny tekst, który chcesz, i zniknie po załadowaniu strony.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-07 07:31:36
Najpierw skonfiguruj wczytywanie obrazu w div. Następnie pobierz element div. Następnie ustaw funkcję, która edytuje css, aby widoczność była "ukryta". Teraz, w <body>, dodaj onload do nazwy funkcji.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-04 16:29:34
Jest na to całkiem łatwy sposób. Kod powinien być coś w stylu:
<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);
}
Oraz w HTML:
<body onload="showcontent(main)"> <!-- onload optional -->
<div id="content"><img src="loading.gif"></div> <!-- leave img out if not onload -->
</body>
Zrobiłem coś takiego na mojej stronie i działa świetnie.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-21 08:37:59
Możesz użyć elementu <progress> w HTML5. Zobacz tę stronę kodu źródłowego i demo na żywo. http://purpledesign.in/blog/super-cool-loading-bar-html5/
Oto element postępu...
<progress id="progressbar" value="20" max="100"></progress>
Wartość ładowania będzie zaczynała się od 20. Oczywiście tylko element nie wystarczy. Musisz go przenieść, gdy skrypt się ładuje. Do tego potrzebujemy JQuery. Oto prosty skrypt JQuery, który uruchamia postęp od 0 do 100 i robi coś w określonym czasie miejsce.
<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>
Dodaj to do swojego pliku 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-08 20:33:13
#Metoda Pure css
Umieść to na górze kodu (przed znacznikiem nagłówka)
<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>I to na dole po wszystkim innym kodzie (oprócz znacznika /html)
<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>To zawsze działa dla mnie 100% czasu
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-21 11:33:07