JQuery - Wie man einen Spinner beim Laden von Inhalt in einem div zeigt?

Question

Ich habe eine Navigationsleiste mit einigen Links darin. Wenn Sie auf einen Link klicken, wird ein Inhalt von einer entsprechenden HTML-Seite in einem Div neben der Navigationsleiste geladen. Da das Laden des Inhalts einige Sekunden dauern kann, versuche ich einen Spinner zu zeigen, während der Inhalt geladen ist. Hier ist ein Beispielcode ich versucht habe:

$('.nav_link').click(function(e) { 
    $('.div_content').html(''); 

    var link = $(this); 
    setTimeout(function() { 
     $(".div_content").load(link.attr('ref')); 
    }, 1000); 

    $('.spinner').show(); // show Loading Div 

    setTimeout(function() { 
     $('.spinner').hide(); // hide loading div 
    },1500); 
}); 

Der obige Code zeigt die Spinner und es beginnt sich zu drehen, dann hält er an und gefriert, bis der Inhalt geladen wird. Der Spinner verschwindet dann und der Inhalt erscheint gut. Anstelle dieses Gefrierspinners muss es sich weiter drehen, bis der Inhalt vollständig geladen ist.

Here is a full code example in plnkr

Irgendwelche Vorschläge?

Answer 1

Ich habe endlich eine interessante Lösung für meine Frage gefunden. Die Verwendung eines GIF-Spinner-Bilds wird eingefroren, während der HTML-Inhalt in das div geladen wird. Stattdessen habe ich ein css-erstelltes Spinner verwendet, das reibungslos funktioniert hat, ohne einzufrieren. Es kann wie erläutert here erstellt werden.