So erstellen Sie eine Preloader-Seite

Question

Ich möchte eine Seite haben, die geladen wird, bis der Inhalt des Links/der Seite, die besucht wird, vollständig geladen ist.

hier ist mein Code

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

Sie $(document).ajaxStart().ajaxStop() verwenden können:

$(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 .put diesen div-Tag unter dem Anfang des Body-Tages

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

Javascript

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