Add A Loading Image to Website

我正在使用Wordpress製作一個網站。在定製器中，我添加了「加載器」樣式和js代碼。另外我在_header.php文件中添加一個標籤。但網頁始終停留在加載圖像中。問題是什麼？Add A Loading Image to Website

CSS：

#loader { 
position: fixed; 
left: 0px; 
top: 0px; 
width: 100%; 
height: 100%; 
z-index: 9999; 
background: url('http://i.imgur.com/36zxp64.jpg?1') 50% 50% no-repeat rgb(249,249,249); 
}

JS：

<script type="text/javascript"> 
jQuery(window).load(function() { 
jQuery("#loader").fadeOut("slow"); 
}); 
</script>

來源

2014-07-11 roth514

首先，問問自己：「我真的需要裝載機嗎？」如果您的網站足夠慢需要，請修復此問題。特別是如果你使用這個巨人，將近1MB圖像作爲加載器... – ceejayoz

忘記圖像，使用CSS3。 http://codepen.io/TheDutchCoder/pen/hzDqw – rcorrie

查看[JavaScript錯誤控制檯]（http://www.creativebloq.com/javascript/javascript-debugging-beginners-3122820）並告訴你在那裏看到了哪些錯誤以及他們指向哪條線。如果你真的有這些引號（「」），他們會拋出一個錯誤（你需要使用直引號（「」））。 – JJJ

使用 '負荷' 事件相反的，使用 '文件準備好' 事件。我編輯了一個新的工作jsfiddle。您可以通過更改該值來指定更長或更快的淡入淡出效果，以毫秒爲單位。

//Jquery on page Ready event 
$(function(){ 
    $("#loader").fadeOut(1000); 
});

Working jsfiddle

「傳遞給。就緒（）處理程序保證後DOM準備好執行，因此，這通常是連接的所有其他事件處理程序和運行其它jQuery代碼的最佳場所「。 [取自Jquery Document Ready頁面]（http://api.jquery.com/ready/）

來源

2014-07-11 18:59:42 IndieRok

感謝您的答覆。它在本地和您的jsfiddle工作。但它不工作在我的網站...似乎該網站不加載jquery，所以頁面始終停留在加載圖像...我不知道爲什麼... – roth514

您是否在瀏覽器Web Dev控制檯中看到任何錯誤？ jquery加載？也許另一個腳本文件與jquery發生衝突。 – IndieRok

哦，並確保你加載jquery之前你的自定義腳本，否則將不會執行任何操作。只是說 – IndieRok

Add A Loading Image to Website

回答

相關問題