顯示加載圖標直到頁面加載？
[英]show loading icon until the page is load?
問題描述
我想向用戶顯示加載圖標，直到頁面元素完全加載。 我怎樣才能用 javascript 做到這一點，我想用 javascript 而不是 jquery 來做到這一點？
這是谷歌如何做到這一點的鏈接我該怎么做？ 在 onload 事件或類似的東西上觸發一些函數..我知道它會像這樣或任何其他方式來完成？ 或者有什么活動？
更新我使用 display 屬性做了一些事情我隱藏了 body 元素但是加載了 body 標簽我改變了它的屬性但是在哪里放置加載圖標並添加更多的交互性。
7 個解決方案
解決方案1
67 已采納 2014-05-28 09:20:28
HTML
<body>
<div id="load"></div>
<div id="contents">
jlkjjlkjlkjlkjlklk
</div>
</body>
JS
document.onreadystatechange = function () {
var state = document.readyState
if (state == 'interactive') {
document.getElementById('contents').style.visibility="hidden";
} else if (state == 'complete') {
setTimeout(function(){
document.getElementById('interactive');
document.getElementById('load').style.visibility="hidden";
document.getElementById('contents').style.visibility="visible";
},1000);
}
}
CSS
#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(0,0,0,0.25)
}
筆記：
演示
http://jsfiddle.net/6AcAr/ - 超時（僅用於演示）
http://jsfiddle.net/47PkH/ - 沒有超時（將其用於實際頁面）
更新
解決方案2
10 2017-08-09 03:58:21
將加載器放入網站的最簡單方法。
HTML：
<div id="loading"></div>
CSS：
#loading {
position: fixed;
width: 100%;
height: 100vh;
background: #fff url('images/loader.gif') no-repeat center center;
z-index: 9999;
}
查詢：
<script>
jQuery(document).ready(function() {
jQuery('#loading').fadeOut(3000);
});
</script>
解決方案3
1 2016-09-02 07:21:53
在 body 標簽中添加 class="loading" 然后使用下面的腳本和以下 css 代碼
body {
-webkit-transition: background-color 1s;
transition: background-color 1s;
}
html, body { min-height: 100%; }
body.loading {
background: #333 url('http://code.jquery.com/mobile/1.3.1/images/ajax-loader.gif') no-repeat 50% 50%;
-webkit-transition: background-color 0;
transition: background-color 0;
opacity: 0;
-webkit-transition: opacity 0;
transition: opacity 0;
}
使用此代碼
var body = document.getElementsByTagName('body')[0];
var removeLoading = function() {
setTimeout(function() {
body.className = body.className.replace(/loading/, '');
}, 3000);
};
removeLoading();
解決方案4
1 2018-08-06 11:39:45
HTML、CSS、JS 都很好，如上述答案所示。 但是他們不會阻止用戶點擊加載器和訪問頁面。 如果頁面時間很大，它看起來很破碎並且無法達到目的。
所以在 CSS 中考慮添加
pointer-events: none;
cursor: default;
另外，如果您使用現在每個人都使用的 fontawesome，而不是使用 gif 文件，請考慮在您的 html 中使用
<i class="fa fa-spinner fa-spin">
解決方案5
0 2015-10-26 10:41:18
進行ajax調用的元素可以調用loading(targetElementId)方法，如下所示將loading/icon放入目標div，准備好后會被ajax結果覆蓋。 這對我很有用。
<div style='display:none;'><div id="loading" class="divLoading"><p>Loading... <img src="loading_image.gif" /></p></div></div>
<script type="text/javascript">
function loading(id) {
jQuery("#" + id).html(jQuery("#loading").html());
jQuery("#" + id).show();
}
解決方案6
0 2017-07-01 12:12:52
HTML頁面
<div id="overlay">
<img src="<?php echo base_url()?>assest/website/images/loading1.gif" alt="Loading" />
Loading...
</div>
腳本
$(window).load(function(){
//PAGE IS FULLY LOADED
//FADE OUT YOUR OVERLAYING DIV
$('#overlay').fadeOut();
});
解決方案7
-8 2014-05-28 09:01:53
首先，在您的主頁中使用加載圖標
然后，從主頁中刪除您的</body>和</HTML>並將其替換為
<?php include('footer.php');?>
在 footer.php 文件類型中：
<?php
$iconPath="myIcon.ico" // myIcon is the final icon
echo '<script>changeIcon($iconPath)</script>'; // where changeIcon is a javascript function whiwh change your icon.
echo '</body>';
echo '</HTML>';
?>
顯示加載圖標，直到頁面加載其第一個元素
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.