jQuery ganze HTML-Seite mit Spinner laden

Ich versuche etwas einfaches - machen Sie ein jQuery-Skript, das warten wird, um die gesamte Seite, einschließlich aller DIVs, Text und Bilder anzuzeigen. Während die Seite geladen wird, möchte ich anstelle von Teilen der Seite ein sich drehendes GIF-Bild zeigen, und wenn die gesamte Seite geladen ist, können wir den Inhalt der Seite im Browserfenster ausblenden.jQuery ganze HTML-Seite mit Spinner laden

Es gibt viele Skripte, die mit einer Ajax-Anforderung in ein Container-DIV geladen werden sollen - aber das ist anders. Dies zeigt ein sich drehendes GIF, während eine HTML-Seite geladen wird. Jede Hilfe ist willkommen

Diese Art von Skript funktioniert nur auf AJAX-Anfragen

$('#loadingDiv') 
    .hide() // hide it initially 
    .ajaxStart(function() { 
     $(this).show(); 
    }) 
    .ajaxStop(function() { 
     $(this).hide(); 
    });

Quelle

2012-05-24 user1317510

$(document).ready(...) wird ausgelöst, sobald das DOM geladen ist. Das ist zu bald. Sie sould $(window).load(...) verwenden:

JavaScript:

$(window).load(function(){ 
    $('#cover').fadeOut(1000); 
})

CSS:

#cover { 
    background: url("to/your/ajaxloader.gif") no-repeat scroll center center #FFF; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
}

HTML:

<div id="cover"></div> 
<!-- rest of the page... -->

Blick auf diese jsFiddle: http://jsfiddle.net/gK9wH/9/

Quelle

2012-05-24 17:54:47 AvL

ja, das Dokument bereit feuert zu früh, und einige Elemente könnten mitten im Rendering im Browserfenster sein und es wird dies zeigen ... so wie können wir zuerst den Spinner zeigen und dann ausblenden - wenn wir darauf warten das Fenster zum Laden? – user1317510

Siehe bearbeiten ... oder direkt hier: http://jsfiddle.net/gK9wH/ – AvL

ja. Ich sehe, das funktioniert! Aber ich sehe den Spinner nicht. Vielleicht ist der Spinner durch das JSFiddle Fenster Scroll versteckt? – user1317510

Ich denke, der beste Weg, einen ‚Deckel‘ div zu haben wäre, die die gesamte Seite abdecken, während es lädt. Es wäre undurchsichtig und würde Ihr GIF enthalten.

Das folgende würde dann die div verstecken sobald die Seite geladen:

$(document).ready(function() { 
    // Hide the 'cover' div 
});

Das folgende würde die div die Größe der Seite:

.div{ 
    height:100%; 
    width:100%; 
    overflow:hidden; 
}

Quelle

2012-05-24 17:48:27

Zuerst meinen Sie alles in der zwischen den Body Tags? Die beste Möglichkeit, das Geschenk zu spinnen, besteht darin, eine Klasse hinzuzufügen, die das GIF definiert, da keine Wiederholungen und Zentrierungen vorhanden sind. Die Klasse wird entfernt, wenn die Seite zur Anzeige bereit ist.

$('body').addClass('loading') 
$('body').removeClass('loading')

Dies ist immer die beste Technik, denn wenn man etwas dann einreichen versuchen, das gif durch eine DOM zusätzlich hinzuzufügen einige Browser wird es nicht tun, weil die Seite gestellt wurde.

Quelle

2012-05-24 17:53:39 Elliott

also, wie würden wir das genau tun? Was ich meine ist ... wie wissen wir, wenn alle Bytes geladen sind und es Zeit ist, die Ladeklasse zu entfernen und den Hauptteil des Körpers einzublenden? – user1317510

Ich würde die gesamte Seite mit einem Overlay abdecken und dann das Overlay entfernen, sobald die Seite geladen ist. Sie können dies anpassen, um auch ein loading.gif anzuzeigen, wenn Sie möchten. Hier ist ein Beispiel:

HTML

<body> 
<div id="container"> 
    <h2>Header</h2> 
    <p>Page content goes here.</p> 
    <br /> 
    <button id="remove_overlay">Remove Overlay</button> 
</div> 
</body>

CSS

#container{padding:20px;} 

h2 {margin-bottom: 10px; font-size: 24px; font-weight: bold;} 

#overlay { 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 100%; 
     height:2305px !important; /*change to YOUR page height*/ 
     background-color: #000; 
     filter:alpha(opacity=50); 
     -moz-opacity:0.5; 
     -khtml-opacity: 0.5; 
     opacity: 0.5; 
     z-index: 998; 
} 
#remove_overlay{position:relative; z-index:1000;}

jQuery:

$(document).ready(function() { 

     // Set a variable that is set to the div containing the overlay (created on page load) 
     var page_overlay = jQuery('<div id="overlay"> </div>'); 

     // Function to Add the overlay to the page 
     function showOverlay(){ 
      page_overlay.appendTo(document.body); 
     } 
     // Function to Remove the overlay from the page 
     function hideOverlay(){ 
      page_overlay.remove(); 
     } 

     // Show the overlay. 
     $(showOverlay); 

     }); 
}); 

$(document).ready(function() { 
    $(hideOverlay); 
});

Sie werden diese müssen zwicken, damit es die Overlay geladen, sobald Die Seite wird angefordert (den Aufruf $(showOverlay); so anpassen, dass er ausgelöst wird, bevor das Dokument fertig ist .

Hier ist eine einfache Arbeit Geige mit einer Schaltfläche, um das Overlay zu entfernen. Sie sollten in der Lage sein, von dort zu gehen :) http://jsfiddle.net/3quN5/

Quelle

2012-05-24 19:00:19 adamdehaven

jQuery ganze HTML-Seite mit Spinner laden

Antwort

Verwandte Themen