Heim >Web-Frontend >HTML-Tutorial >Analyse des Bildvorladens in HTML (mit Code)
Analyse des Bildvorladens in HTML (mit Code)
- 不言Original
- 2018-08-02 09:34:133020Durchsuche
Dieser Artikel stellt Ihnen die Analyse des Bildvorladens in HTML vor (mit Code). Ich hoffe, dass er für Freunde hilfreich ist.
Wenn wir HTML-Seiten schreiben und Bilder zur Seite hinzufügen müssen, fügen wir die Bilder natürlich direkt in den 6c04bd5ca3fcae76e30b72ad730ca86d-Tag ein kein großes Problem.
Aber wenn es viele Bilder gibt, entstehen Probleme. Wenn die HTML-Seite vom Parser analysiert wird, muss er ständig nach dem Pfad des Bildes suchen, um das Bild zu laden, und diese Bilder können vom Benutzer möglicherweise nicht unbedingt gesehen werden, indem er einige klickähnliche Vorgänge auslöst. Auf diese Weise verlängert das unnötige Vorladen von Bildern die Ladezeit der Seite und führt zu einer schlechten Benutzererfahrung.
Um dieses Leistungsproblem zu lösen, besteht eine bessere Lösung darin, js zu verwenden, um das Vorladen von Bildern zu verzögern. Was ist also der konkrete Implementierungsprozess?
Ich werde zuerst den Code, den ich implementiert habe, unten einfügen:
<html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title><style>
body{position:relative;text-decoration: none;list-style: none;}
.showpic{position:absolute;height:550px;width:90%;margin-left:80px;background-color: black;}
.button-box{position: absolute;margin-top:560px;margin-left: 600px;z-index: 5;}
.preload{position: fixed;height: 100%;width:100%;top:0;background-color: white;display: none;}
img{position: absolute;margin-left: 30px;margin-top: 3px;}
button{height: 30px;width:80px;font-size: 10px;}</style><script src="https://code.jquery.com/jquery-1.12.4.js"></script></head><body>
<p class="showpic">
<img src="img/pexels-photo-297814.jpeg" id="img">
</p>
<p class="button-box">
<button type="button" value="前一张" data-control="prev" class="button">前一张</button>
<button type="button" value="后一张" data-control="next" class="button">后一张</button>
</p>
<p class="preload"></p><script type="text/javascript" src="js/preload.js"></script></body></html>$(document).ready(function(){
var imgs = ["img/pexels-photo-297814.jpeg",
"img/pexels-photo-465445.jpeg",
"img/pexels-photo-619948.jpeg",
"img/pexels-photo-620336.jpeg",
"img/pexels-photo-885746.jpeg",
"img/pexels-photo-886109.jpeg",
"img/pexels-photo-888994.jpeg"];
var index = 0,
len =imgs.length;
$(".button").on("click",function(){
if($(this).data('control')=== "prev"){
index = Math.max(0,--index);
}else{
index = Math.min(len-1,++index);
}
$("#img").attr("src",imgs[index]);
});
});
In diesem Fall möchte ich Klickschaltflächen implementieren Erkennen Sie den Anzeigeprozess von Bildern. Offensichtlich habe ich nur ein Bild in das a1f02c36ba31691bcfe87b2722de723b-Tag des Felds 6ffcb40369b851f71b47260865168208 eingefügt (um zu verhindern, dass die Seite ohne Inhalt geöffnet wird) und nicht alle Bilder eingefügt, die angezeigt werden können die Kiste rein. Denn dadurch erhöht sich zwangsläufig der Druck auf den Webbrowser, die HTML-Seite zu analysieren.
Ich habe alle Suchpfade dieser Bilder in den js-Code eingefügt und das a1f02c36ba31691bcfe87b2722de723b-Tag aktualisiert. Außerdem habe ich das Datenattribut von HTML verwendet, um den Klicktyp anzupassen. und bestimmen Sie die Änderung des Bildpfads, indem Sie diesen Datenwert in js erhalten.
Eine solche Implementierung trägt eher dazu bei, den Druck auf den Browser-Parser während des Parsing-Prozesses von HTML-Seiten zu verringern.
Empfohlene verwandte Artikel:
So beschreiben Sie kurz die Grundstruktur von HTML (mit Code)
HTML-Metadatenanalyse von Meta-Tag-Attributen (mit Code)
Das obige ist der detaillierte Inhalt vonAnalyse des Bildvorladens in HTML (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!