Permet progressivement de charger des images avec Vanilla JS

Tout site Web moderne doit être rapide. Bien qu'il existe de nombreuses techniques et plugins pour augmenter la vitesse de la page, vous ne savez peut-être pas par où commencer..

Le script Progressively est un excellente ressource pour augmenter la vitesse de la page. Il fonctionne comme un script d’image à chargement paresseux qui charge les images au fur et à mesure que l’utilisateur fait défiler la page vers le bas..

C'est un projet open source gratuit, vous pouvez donc le télécharger et l'exécuter sur n'importe quel site Web. En plus fonctionne sur 100% vanille JS, donc il a zéro dépendance qui peut vous alourdir.

Vous pouvez regarder la démo en direct sur la page d'accueil de Progressively.

C'est un peu différent des autres scripts de chargement différé, car il conserve des tailles d'image fixes pour toute la page. Ce empêche le saut de page si embêtant que vous voyez chaque fois que les images se chargent rapidement et augmenter la hauteur du contenu.

Et les espaces réservés aux images ressemblent en réalité aux images que vous chargez. Impressionnant!

Cette technique soignée donne aux visiteurs une chance de prévisualiser l'apparence des images avant leur chargement. Tout cela est géré via JavaScript qui vérifie l'emplacement de l'utilisateur sur la page et précharge les images lorsqu'elles apparaissent..

A progressivement un API assez étendue c'est donc un excellent choix pour les développeurs web. La configuration peut devenir technique, donc cela vous aidera si vous connaissez bien le codage de base en front-end.

Mais vous pouvez en apprendre plus sur la page principale de GitHub, qui comprend la documentation complète de l'API, les instructions de configuration et des extraits de code que vous pouvez copier / coller pour vos projets..

Si vous avez besoin d'un script d'image de chargement paresseux digne de confiance sans les dépendances désagréables, tentez progressivement votre chance. C'est totalement gratuit et offre beaucoup de personnalisation pour les développeurs.

Jetez également un coup d’œil au Progressively GitHub pour en savoir plus et pour trouver le code source téléchargeable..