Ein Ladesymbol anzeigen, bis die Seite das erste Element lädt

Question

Ich habe eine mobile Website und suchte nach einem Lade-Symbol, wenn der Benutzer auf einen Link klickt. Ich fand ein anständiges Tutorial - Check it here

Ich habe das verwendet, aber ich habe ein Problem. Es wird das Ladesymbol angezeigt, bis die Seite vollständig geladen ist. Aber für langsamere Verbindungen kann es lange dauern. Was ich tun muss, ist, dass das Ladesymbol nicht mehr angezeigt wird, wenn die Seite ihren ersten Inhalt lädt oder zumindest etwas anzeigt, damit der Benutzer nicht lange warten muss und er die Seite überprüfen kann, während sie teilweise geladen ist. Ich habe keine Ahnung, wie ich das mache. Jede Hilfe wäre willkommen. Dieser ist der Code, ich verwende -

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(window).load(function() { 
     $(".loader").fadeOut("slow"); 
    }) 
    </script> 
<div class="loader"></div> 

.loader { 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 9999; 
    background: url('images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249); 
} 

Answer 1

document.addEventListener( "DOMContentLoaded", ready, false ); 
function ready(){ 
alert("page initialised"); 
} 

Verwenden DOMContentLoaded statt onload ...