如何製作預加載器頁面

Question

我希望有一個預加載的頁面，直到正在訪問的鏈接/頁面的內容被完全加載。

這裏是我的代碼

$(document).ready(function() { 
    $.ajax({ 
    method: 'GET', 
    url: "pages/main.html", 
    success: function(content) 
    { 
     $('#contentarea').html (content); 
    } 
}); 
    }); 



$('.menu_nav') .click (function() { 
var href = $(this) .attr('href'); 
$('#contentarea').hide() .load(href).slideDown('very slow') 

    return false; 
}); 

Answer 1

您可以使用$(document).ajaxStart().ajaxStop()：

$(document).ajaxStart(function(){ 
    $('#contentarea').prev().append('<span>loading</span>'); 
}).ajaxStop(function(){ 
    $('#contentarea').prev('span').remove(); 
}); 

Answer 2

CSS

#loader-wrapper{ 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 10000; 
    background-color: #ffffff; 
    opacity: 1; 
} 

HTML。把body標籤開始低於這個div標籤

<div id="loader-wrapper"></div> 

的JavaScript

window.addEventListener("load",function(){ 
    var load_screen = document.getElementById("loader-wrapper"); 
    document.body.removeChild(load_screen); 
});