Wie lade ich das Ladebild/GIF, bis die Seite index.html geladen ist?

Ich habe eine Webseite mit einem eckigen erstellt. Meine Seite wird sehr langsam geladen. Nehmen Sie 5 bis 10 Sekunden. In der Zwischenzeit möchte ich einige Ladebild oder Spinning Gif zeigen.Wie lade ich das Ladebild/GIF, bis die Seite index.html geladen ist?

In unten js fiddle achive das oben genannte Problem in Javascript. Ich möchte diese Funktionalität in den Winkel js

html verwenden

<body> 
<div id="load"></div> 
<div id="contents"> 
     jlkjjlkjlkjlkjlklk 
</div>

document.onreadystatechange = function() { 
var state = document.readyState 
if (state == 'interactive') { 
    document.getElementById('contents').style.visibility="hidden"; 
} else if (state == 'complete') { 
    setTimeout(function(){ 
    document.getElementById('interactive'); 
    document.getElementById('load').style.visibility="hidden"; 
    document.getElementById('contents').style.visibility="visible"; 
    },10000); 
} 
}

css

#load{ 
width:100%; 
height:100%; 
position:fixed; 
z-index:9999; 
background:url("https://www.creditmutuel.fr/cmne/fr/banques/webservices/nswr/images/loading.gif") no-repeat center center rgba(0,0,0,0.25)

`http://jsfiddle.net/d9ngT/

Quelle

2016-05-07 SrinivasAppQube

Sie müssen ngCloack verwenden. https://docs.angularjs.org/api/ng/directive/ngCloak

Und wenn Sie einen Vollbild-Loader zu definieren, während der Winkel App gestartet wird, als auf Ihrer Seite din Element erstellen und es Klassen full-screen-loader und ng-cloack

CSS

.ng-cloack { 
    z-index: 9999; 
} 
.full-screen-loader { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    z-index: -9999; 
}

zuordnen

Ihr html

<div class="full-screen-loader ng-cloak"> 
    <img class="additional-styling" src="some-loader.gif"> 
</div>

Während Ihre eckige App geladen wird, Die ng-clock-Klasse setzt den Z-Index Ihres Loader-Containers so, dass er auf jedem anderen Inhalt auf der Seite steht. Und wenn eckig geladen wird, wird Ihr Ladecontainer auf alles auf der Seite gebracht. Ich möchte auch erwähnen, dass Sie Body- und HTML-Tags möglicherweise etwas Styling hinzufügen müssen, damit Ihr Loader den gesamten Fensterbereich des Browsers nutzt.

Quelle

2016-05-07 05:56:24 k10der

Vielen Dank für den Vorschlag für mich arbeiten – SrinivasAppQube

Sie sind herzlich willkommen! :) – k10der

Wie lade ich das Ladebild/GIF, bis die Seite index.html geladen ist?

Antwort

Verwandte Themen