Die JavaScript-Implementierung des Fortschrittsbalkencodes für das Laden von Webseiten ist sehr einfach. Javascript-Kenntnisse

Der Fortschrittsbalken der Webseite kann den Ladefortschritt der aktuellen Webseite besser widerspiegeln. Der Ladefortschrittsbalken kann von 0 % auf 100 % animiert werden, um den Ladevorgang der Webseite abzuschließen. Aktuelle Browser bieten jedoch keine Schnittstelle für den Seitenladefortschritt, was bedeutet, dass die Seite den tatsächlichen Ladefortschritt der Seite nicht genau zurückgeben kann. In diesem Artikel verwenden wir jQuery, um den Seitenladefortschrittsbalkeneffekt zu erzielen.

HTML

Das erste, was wir wissen müssen, ist, dass derzeit kein Browser die Größe des geladenen Objekts direkt ermitteln kann. Daher können wir durch die Datengröße keinen Lade- und Anzeigevorgang von 0–100 % erreichen.

Daher müssen wir die Funktion zum zeilenweisen Laden des HTML-Codes verwenden, Knoten in mehreren Sprungzeilen des gesamten Seitencodes festlegen und eine ungefähre Fuzzy-Fortschrittsrückmeldung bereitstellen, um den Effekt des Fortschrittsladens zu erzielen. Die allgemeine Bedeutung ist: Jedes Mal, wenn die Seite in den angegebenen Bereich geladen wird, wird das Fortschrittsergebnis von (n) % zurückgegeben. Durch das Festlegen mehrerer Knoten wird der Zweck erreicht, den Ladefortschritt Schritt für Schritt anzuzeigen.

Wenn eine Seite vorhanden ist, ist sie entsprechend dem Block in vier Teile unterteilt: Kopfzeile, linker Inhalt, rechte Seitenleiste und Fußzeile. Wir betrachten diese vier Teile als vier Knoten, die ungefähr festgelegt werden Ladeprozentsatz, die Seitenstruktur ist wie folgt:

<div id="header"> 
页头部分 
</div> 
<div id="mainpage"> 
左侧内容 
</div> 
<div id="sider"> 
右边侧栏 
</div> 
<div id="footer"> 
页脚部分 
</div> 

Dann fügen wir den Fortschrittsbalken beim Laden in die erste Zeile unter ein.

<div class="loading"></div> 

CSS

Wir müssen den Stil des Ladefortschrittsbalkens, die Hintergrundfarbe, Höhe, Position, Priorität usw. festlegen.

.loading{ 
 background:#FF6100; //设置进度条的颜色 
 height:5px; //设置进度条的高度 
 position:fixed; //设定进度条跟随屏幕滚动 
 top:0; //将进度条固定在页面顶部 
 z-index:99999 //提高进度条的优先层级，避免被其他层遮挡 
} 

jQuery

Als nächstes müssen wir hinter jedem Knoten eine Fortschrittsanimation hinzufügen und diese mit jQuery implementieren.

<div id="header"> 
页头部分</div> 
<script type="text/javascript"> 
 $('.loading').animate({'width':'33%'},50); 
 //第一个进度节点 
</script> 
<div id="mainpage"> 
左侧内容 
</div> 
<script type="text/javascript"> 
 $('.loading').animate({'width':'55%'},50); 
//第二个进度节点 
</script> 
<div id="sider"> 
右边侧栏 
</div> 
<script type="text/javascript"> 
 $('.loading').animate({'width':'80%'},50); 
//第三个进度节点 
</script> 
<div id="footer"> 
页脚部分 
</div> 
<script type="text/javascript"> 
 $('.loading').animate({'width':'100%'},50); 
 //第四个进度节点 
</script> 

Es ist ersichtlich, dass jQuery die Animationsmethode animate() aufruft, um die Breite des Fortschrittsbalkens zu ändern. Jede Knotenänderung dauert 50 Millisekunden, damit der Fortschrittsbalken glatter aussieht, und ändert sich schließlich von 0 % auf 100 %, die Fortschrittsanimation des Fortschrittsbalkens ist abgeschlossen.

Wenn der Fortschrittsbalken 100 % erreicht, wird die Seite geladen. Der letzte Schritt besteht darin, den Fortschrittsbalken auszublenden.

$(document).ready(function(){ 
 $('.loading').fadeOut();  
});