如何顯示加載屏幕，而網站內容加載

26

典型的網站是通過ajax加載內容並監聽readystatechanged事件以使用加載GIF或內容來更新DOM。

您目前正在載入您的內容？

的代碼將類似於此：

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庫，可能使您的生活更輕鬆，但上面確實是你所需要的。

來源

2008-10-28 17:55:17 mmattax

+0

你能告訴我什麼第三方庫？ – Shekhar 2012-07-22 07:37:07

5

你說你不想在AJAX中這樣做。雖然AJAX非常適合這種情況，但有一種方法可以在等待整個<body>加載時顯示一個DIV。它是這樣的：

<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會觸發。

來源

2010-11-04 19:43:43

0

實際上有一個很簡單的方法來做到這一點。代碼應該是這樣的：

<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>

我不喜歡的東西，我的網頁上，它的偉大工程。

來源

2012-06-29 03:32:11 Johnz

0

您可以在HTML5中使用<progress>元素。看到這個頁面的源代碼和現場演示。 http://purpledesign.in/blog/super-cool-loading-bar-html5/

這裏是progress元素...

<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>

希望這會給你一個開始。

來源

2014-01-08 20:33:13

2

用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，和你想要的任何文本，它將淡出一旦頁面加載

然後。

來源

2014-12-07 07:31:36

2

首先，在div中設置一個加載圖像。接下來，獲取div元素。然後，設置一個編輯css的函數來使可見性「隱藏」。現在，在<body>中，將onload添加到函數名稱中。

來源

2015-12-31 21:57:58 Peach

0

#Pure CSS方法

將這個在你的代碼的頂部（前頭標記）

<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>

，這在底部之後所有其他代碼（exc EPT/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>

這總是對我的作品的時候100％

來源

2016-04-21 11:33:07 MindCraftMagic

如何顯示加載屏幕，而網站內容加載

回答

相關問題