So implementieren Sie den Fortschrittsbalken zum Laden einer JQuery-Webseite

In diesem Artikel wird hauptsächlich die Implementierung des Ladefortschrittsbalkens von jquery vorgestellt. Wenn Sie interessiert sind, kann er Ihnen helfen .

Der Vorteil des Ladefortschritts einer Webseite besteht darin, dass er den Ladefortschritt der aktuellen Webseite besser widerspiegeln kann. Der Ladefortschrittsbalken kann von 0 % bis 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.

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.

Angenommen, es gibt eine Seite, die in vier Teile unterteilt ist: Kopfzeile, linker Inhalt, rechte Seitenleiste und Fußzeile. Wir betrachten diese vier Teile als vier Knoten. Legen Sie den ungefähren Ladeprozentsatz fest . Die Seitenstruktur ist wie folgt:

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

Dann fügen wir den Fortschrittsbalken.loading in die erste Zeile unten ein.

<p class="loading"></p>

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

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

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

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

Es ist ersichtlich, dass jQuery nach dem Laden jedes Knotens die Animationsmethode animate() aufruft, um die Breite des Fortschrittsbalkens zu ändern Lassen Sie den Fortschrittsbalken nach 50 Millisekunden glatter aussehen und ändern Sie ihn schließlich von 0 % auf 100 %, um die Fortschrittsanimation des Fortschrittsbalkens abzuschließen.

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

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

Verwandte Empfehlungen:

So verwenden Sie Video- und Audio-Tags und Fortschrittsbalken in H5

So implementieren Sie einen kreisförmigen Fortschrittsbalken in CSS3

Eine einfache Implementierungsmethode des Webseiten-Fortschrittsbalkens

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Fortschrittsbalken zum Laden einer JQuery-Webseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!