Loadr, eine effiziente Lösung zum nahtlosen Laden großer Bilder in HTML

wie funktioniert es:

Es lädt zuerst ein Bild mit niedriger Auflösung aus der IMG-Quelle, dann lädt es im Attribut „HR-Quelle“ das Bild mit hoher Auflösung im Hintergrund. Sobald es geladen ist, wird die URL mit niedriger Auflösung durch die URL mit hoher Auflösung ersetzt.

Schauen Sie sich das Repo an, ein Stern wäre großartig

Demo

Installation

CDN

Loadr mit CDN importieren.

index.html

<script src="https://cdn.jsdelivr.net/npm/open-loadr/loadr.min.js"></script>

? Spezifische Version

<script src="https://cdn.jsdelivr.net/npm/open-loadr@latest/loadr.min.js"></script>

Verwendung

Fügen Sie den hr-src zum HTML hinzu. Element. Dies wird Ihr hochauflösendes Bild sein. Im src-Attribut befindet sich die niedrigaufgelöste Version Ihres Bildes. Loadr lädt das hochauflösende Bild im Hintergrund und aktualisiert dann die Quelle mit ihrer URL und ersetzt das niedrigauflösende Bild.

index.html

<img hr-src="https://open-loadr.github.io/loadr/images/the_starry_night/high_res.jpg" src="https://open-loadr.github.io/loadr/images/the_starry_night/low_res.png">

Rufen Sie Loadr in Ihrem Javascript auf. Das ist es?.

index.html

<script>
  new Loadr();
</script>

Schauen Sie sich die Demo auf Codepen an.

Zusätzlicher Schritt

Fügen wir dem -Element etwas Stil hinzu. Element.

style.css

img {
  height: 300px;
  width: 300px;
  object-fit: cover;
  border-radius: 15px;
  overflow: hidden;
}

Anpassung

Loadr enthält Variablen, die leicht angepasst werden können.

<script>
  new Loadr({
    async: false,
    cache: true,
    delay: '750'
  });
</script>

Schauen Sie sich die Anpassungsdemo auf Codepen an.

Das obige ist der detaillierte Inhalt vonLoadr, eine effiziente Lösung zum nahtlosen Laden großer Bilder in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!