Maison > interface Web > js tutoriel > Loadr, une solution efficace pour charger en toute transparence de grandes images en HTML

Loadr, une solution efficace pour charger en toute transparence de grandes images en HTML

PHPz
Libérer: 2024-09-03 11:39:02
original
914 Les gens l'ont consulté

Loadr, an efficient solution for seamlessly loading large images in HTML

comment ça marche :

il charge d'abord une image basse résolution à partir de l'img src, puis dans l'attribut hr-src, il charge l'image haute résolution en arrière-plan et, une fois chargée, remplace l'URL basse résolution par celle haute résolution.

Découvrez le dépôt, une star serait géniale

Démo

Installation

CDN

Importez Loadr à l'aide de CDN.

index.html

<script src="https://cdn.jsdelivr.net/npm/open-loadr/loadr.min.js"></script>
Copier après la connexion

? Version spécifique

<script src="https://cdn.jsdelivr.net/npm/open-loadr@latest/loadr.min.js"></script>
Copier après la connexion

Usage

Ajoutez le hr-src au fichier HTML élément, ce sera votre image haute résolution. Dans l'attribut src se trouve la version basse résolution de votre image. Loadr chargera l'image haute résolution en arrière-plan puis mettra à jour le src avec son URL, en remplaçant l'image basse résolution.

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">
Copier après la connexion

Appelez Loadr dans votre Javascript. C'est ça ?.

index.html

<script>
  new Loadr();
</script>
Copier après la connexion

Découvrez la démo sur Codepen.

Étape supplémentaire

Ajoutons un peu de style au élément.

style.css

img {
  height: 300px;
  width: 300px;
  object-fit: cover;
  border-radius: 15px;
  overflow: hidden;
}
Copier après la connexion

Personnalisation

Loadr est livré avec des variables qui peuvent être facilement personnalisées.

<script>
  new Loadr({
    async: false,
    cache: true,
    delay: '750'
  });
</script>
Copier après la connexion

Découvrez la démo de personnalisation sur Codepen.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal