[email protected]
Twitter
LinkedIn
GitHub
  • Blog
  • GitHub
  • CV

jQuery: Charger les images selon les besoins (lazy load)

Août 7, 2015L'extrémité avant1 Commentairejfadev

Télécharger toutes les images sur une page avant de l'ouvrir peut être lourd dans certains cas. La solution dans ce cas peut être une fois chargé la page aller cargar progressivement l'ensemble des images qui devront s'afficher (lazy load). Au fur et à mesure qu'on scrolle les images dont vous aurez besoin se chargent pour sa visualisation.

Si vous utilisez la bibliothèque jQuery, nous pouvons utiliser le plugin jQuery LazyLoad pour simplifier cette tâche.

<html>
    <head>
        <script src="jquery-1.11.1.js"></script>
        <script src="jquery.lazyload.js"></script>
        
        <script type="text/javascript">
            $(document).ready(function() {
                $("img.lazy").lazyload({
                    effect : "fadeIn"
                });
            }); 
        </script>
    </head>
    <body>
        <img class="lazy" data-original="img1.jpg" width="640" height = "480"/>
        <img class="lazy" data-original="img2.jpg" width="640" height = "480"/>
        <img class="lazy" data-original="img3.jpg" width="640" height = "480"/>
    </body>
</html>

Doc: ici

Télécharger: ici

: jQuery, JS, Web Developement
jfadev
https://jordifernandes.com
Programmeur et Développeur Web depuis 2006. Diplômé en Informatique de Gestion à Marseille 15+ années d'expérience dans les technologies Web.

Twitter

Mes Tweets

Posts Rencents

  • Afficher une publication Instagram spécifique dans WordPress avec Jfa Social Media Post
  • Créez une image personnalisée et distribuez-la sur Azure VMSS à l'aide de GitHub Actions
  • Calculateur de processus PHP-FPM
  • Jfa PWA Toolkit
  • Liste des backlinks pour SEO
  • Liste complete de générateurs de backlinks pour le positionnement SEO
  • Modal Dialog pour Material Design Lite
  • Exécuter une commande Symfony2 partir cronjobs dans CPanel sur un hébergement mutualisé
  • Détection d'AdBlock avec jQuery ou JavaScript
  • Vidéo: Introduction à Apache Cordova en espagnol

Catégories

  • Back-End (5)
  • DevOps (1)
  • L'extrémité avant (12)
  • Actualités (8)
  • SEO (2)
  • Outils (6)
  • Astuces (10)
  • Non classé (3)

Découvrer

  • Los Mejores Top 10
  • Boutique Slow Fashion
Twitter
LinkedIn
GitHub

© 2013-2022 Jordi Fernandes Alves (@jfadev)