Wie wird ein animiertes Gif während des Seitenumbaus angezeigt?

Das Projekt verwendet Backbone.js.Wie wird ein animiertes Gif während des Seitenumbaus angezeigt?

Ich versuchte es, indem Sie ein div mit einem gif an den HTML-Text anfügen.

startLoadingAnimation = function() { 
 
    $("<div id='loading'></div>").appendTo("body"); 
 
}

#loading { 
 
    display: block; 
 
    position: fixed; 
 
    z-index: 1000; 
 
    top:  0; 
 
    left:  0; 
 
    height:  100%; 
 
    width:  100%; 
 
    background: rgba(0, 0, 0, .8) 
 
    url('../img/loading.gif') 
 
    50% 50% 
 
    no-repeat; 
 
}

Es hört auf ein Ereignis auf Klick.

Alles läuft wie erwartet, aber das Lade-GIF startet die Animation nicht. Ich vermute, es liegt daran, dass der Browser eine Seitenanfrage oder so etwas macht, also läuft das gif nicht oder hört auf zu laufen. Gibt es das überhaupt, oder eine bessere Möglichkeit, eine "Lade" -Animation in Seitenübergänge zu setzen?

Jede Hilfe oder Hinweis wäre willkommen. Danke im Voraus.

Quelle

2017-11-29 D. Tex

ich kann nicht herausfinden, überall dort Ihr Problem ist, Ihr Snippet keine html hat und Ihre JavaScript-Funktion startet nicht auf klicken Sie in das Snippet, aber wenn ich ein div mit Ihrem CSS und einem zufälligen gif, es funktioniert, können Sie versuchen, mit einem externen Link für das gif? Und siehst du das gefrorene Gif oder nur den grauen Hintergrund? – Neil

Haben Sie versucht, eine CSS-Animation zu verwenden, anstatt eine externe Ressource zu laden?

Sie können viele CSS-Spinnern rund um das Web wie diese finden ein:

html, 
 
body { 
 
    min-height: 100vh; 
 
    min-width: 100vw; 
 
    overflow: hidden; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.spinner-container { 
 
    display: block; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    position: relative; 
 
} 
 

 
.spinner { 
 
    display: block; 
 
    width: 16px; 
 
    height: 16px; 
 
    border-radius: 16px; 
 
    position: absolute; 
 
    left: calc(50% - 8px); 
 
    top: calc(50% - 8px); 
 
    box-shadow: 20px 0px #FB404B, 0px 20px #FFA534, -20px 0px #87CB16, 0px -20px #1DC7EA; 
 
    transform: translatez(0px); 
 
    background: transparent; 
 
    animation: spin 1.2s infinite; 
 
} 
 

 
@keyframes spin { 
 
    0% { 
 
    box-shadow: 20px 0px #FB404B, 0px 20px #FFA534, -20px 0px #87CB16, 0px -20px #1DC7EA; 
 
    transform: rotate(0deg); 
 
    } 
 
    50% { 
 
    box-shadow: 40px 0px #FB404B, 0px 40px #FFA534, -40px 0px #87CB16, 0px -40px #1DC7EA; 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
}

<div class="spinner-container"> 
 
    <div class="spinner"></div> 
 
</div>

Quelle

2017-11-29 13:01:03

Wie wird ein animiertes Gif während des Seitenumbaus angezeigt?

Antwort

Verwandte Themen