Dieser Artikel beschreibt die Methode zur Realisierung der Bildverzögerung des Ladens im nativen JavaScript. Die verzögerte Bildbelastung hat tatsächlich ein JQuery-Plug-In und die Lademethode ist sehr einfach und vernünftig. Einige Freunde denken jedoch, dass das Laden des Jquery-Plug-In-Pakets zu groß ist, also habe ich selbst eine geschrieben, um es mit Ihnen zu teilen.
Zunächst kann das Laden von Bildverzögerungen uns Bandbreite retten und eine bessere Benutzererfahrung erzielen, insbesondere für Websites mit vielen Bildern, was von entscheidender Bedeutung ist. Lassen Sie mich den Prinzip und den Implementierungscode für Bildverzögerung mit Ihnen unten diskutieren.
Bildverzögerungsladungsprinzip
Das Laden von Bildverzögerung ist, dass das Bild SRC in der HTML nicht in der realen Bildadresse ausgefüllt ist, aber die Bildadresse wird dem IMG-Tag mit einem benutzerdefinierten Attribut zugewiesen, wie z. Bei der Erreichung eines bestimmten Punktes wird die reale Adresse des Bildes im benutzerdefinierten Attribut dem SRC des aktuellen IMG -Tags zugeordnet, wodurch die dynamische Anzeige des Bildes erkannt wird. In realen Projekten können die Adressen dieser Bilder durch AJAX weitergeleitet und den benutzerdefinierten Eigenschaften von IMG zugewiesen werden.
Native JS implementiert Bildverzögerungsbelastungsbeispiel:
Der Textinhalt sieht doch etwas langweilig aus. Ich habe eine einfache Demo geschrieben und jetzt den gesamten Code veröffentlichen. Freunde, die es brauchen, können es direkt kopieren und dann werden Sie nach dem Anschauen des Codes verstehen.
Kopieren Sie den Code wie folgt: <! DocType html>
<html>
<kopf>
<meta http-äquiv = "content-type" content = "text/html; charset = utf-8">
<title> Bildverzögerung Laden </title>
<Styles>
IMG {Anzeige: Block; Breite: 350px; Höhe: 245px; Hintergrund: URL (IMG/Loading.Gif) Center Center No-Repeat}
</style>
</head>
<body>
<div id = "div">
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
</div>
<script type = "text/javaScript">
var obj = document.getElementById ("div"). getElementsByTagName ("img"),
H = Fenster.InnerHeight || document.documentElement.clientHeight;
für (var i = 0; i <obj.length; i ++) {
obj [i] .url = obj [i] .getAttribute ("data-url");
obj [i] .top = obj [i] .offsettop;
obj [i] .flag = true; // verhindern, dass der Browser das Bild ständig lädt, sodass das Bild nach dem erfolgreichen Laden nicht geladen wird, wenn der Browser gescrollt wird.
}
var fnload = function (obj) {
var t = document.body.scrolltop || document.documentElement.scrolltop;
if (t+h> obj.top+200 && obj.top> t) {// Geben Sie 200 an, um den Ladestatus des Benutzers zu verbessern, es ist freundlicher
setTimeout (function () {
obj.src = obj.url;
obj.flag = false;
}, 500)
}
}
window.onscroll = window.onload = function () {
für (var i = 0; i <obj.length; i ++) {
if (obj [i] .flag) {
fnload (obj [i]);
}
}
}
</script>
</body>
</html>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.