jQuery: Cargar imagenes a medida que se necesitan (lazy load)

Cargar todas las imágenes a de una pagina antes de abrirla puede resultar pesado en ciertos casos. La solución en esos casos puede ser una vez se ha cargado la pagina ir cargando progresivamente el conjunto de imágenes que se visualizan en ese momento (lazy load). Segun se va haciendo scroll va cargando las imagenes que se va a necesitar para su correcta visualizacion.

Si estamos usando la librería jQuery, podemos usar el plugin jQuery LazyLoad para simplificar esa tarea.

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

<html>

<head>

$(document).ready(function() {

$("img.lazy").lazyload({

effect : "fadeIn"

});

</script>

</head>

<body>

</body>

</html>

Doc: aqui

Descargar: aqui

jfadev

Programmer and systems analyst since 2006. Graduate in Software Engineering in Marseille +10 years of experience in Web Technologies. Currently VueJS & Symfony.