Loadr, une solution efficace pour charger en toute transparence de grandes images en 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>

? Version spécifique

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

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">

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

index.html

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

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;
}

Personnalisation

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

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

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!