的Javascript顯示加載圖標而清爽

我需要顯示裝載機圖標窗口時refreshing.And當文檔ready.What我試圖的Javascript顯示加載圖標而清爽

//一個解決方案

<script> 
document.onreadystatechange = function() { 
    var state = document.readyState 
    if (state == 'complete') { 
     setTimeout(function(){ 
      document.getElementById('interactive'); 
      document.getElementById('load').style.visibility="hidden"; 
     }); 
    } 
} 
</script>

應該隱藏

//另一溶液

//樣式裝載機用戶參考

<style> 
#load{ 
    width:100%; 
    height:100%; 
    position:fixed; 
    z-index:9999; 
    background:url("https://www.creditmutuel.fr/cmne/fr/banques/webservices/nswr/images/loading.gif") no-repeat center center rgba(129, 129, 131, 1) 
} 
</style>

我得到了什麼？頁面刷新完成後，我得到一個加載器圖標嗎？我嘗試運行兩個解決方案評論每個解決方案。

來源

2017-10-05 Manasa

你去哪裏放置裝載機格在HTML –

保持在頁面結束這段代碼'document'準備*約*當HTML被加載。加載圖像和其他外部資源時加載'window'。所以取決於你想要的方式。 – sabithpocker

使用此$（'＃load'）。fadeOut（）; –

Here it is還需要

$(document).ready(function(){ 
    $('loaderid').hide(); 
});

只是body標籤開始後確保裝載機元素。

來源

2017-10-05 07:23:03

如果頁面花費了一段時間來「加載」，可能是因爲有很多jquery文檔已準備就緒 - 在這種情況下，我還會在'.hide（）'周圍添加一個小的'setTimeout'，等待所有的js/jquery完成初始化。 –

是一個聰明的想法。 –

對於非jQuery方法。

添加一些CSS來隱藏自己的DIV，例如mydiv { display:none; }
後負荷，添加/ DIV您刪除mydiv類：

的document.getElementById（ 'DIV1'）classList.remove（」 mydiv'）; document.getElementById（'div1'）。classList.add（'mydiv'）;

來源

2017-10-05 07:24:34 dolphin

如果您稍後將其放在HTML中，則加載div可能會顯示延遲，您可以嘗試在其他代碼之前將加載div注入頁面中的第一件事物。

<title>Smart Page</title> 
<script type="text/javascript"> 
document.write('<div id="loading"><p><b>LOADING</b>...</p></div><style type="text/css">#loading{display:block; otherstyles..}</style>'); 
</script>

使用window.load如果你希望所有的資源，包括要加載，或使用document.ready圖像。其安全之前</body>

<script type="text/javascript"> 

$(window).load(function() { 
    $('#loading').fadeOut(500); 
}); 

</script>

來源

2017-10-05 07:44:07 sabithpocker

的Javascript顯示加載圖標而清爽

回答

相關問題