¿Cómo se hace que las imágenes se carguen solo cuando están en la ventana gráfica?

Question

Veo muchos sitios actualmente, principalmente sitios de tutoriales que tienen muchas imágenes y solo cargan imágenes más abajo en la página una vez que entran al puerto de visualización.

¿Cómo voy a hacer esto?

Un ejemplo:

http://www.chopeh.com/blog/logo-design-start-to-finish/

medida que se desplaza por la página las imágenes a continuación el fundido de buey en

Answer 1

http://www.appelsiini.net/projects/lazyload
https://github.com/tuupola/jquery_lazyload

Demostración:
http://www.appelsiini.net/projects/lazyload/enabled.html

Answer 2

Reemplace sus imágenes con marcadores de posición (p. simplemente cambie el atributo "src" a otra cosa para que la imagen no se cargue, pero la url seguirá siendo accesible), y luego vincule el evento de desplazamiento de la ventana a una función que encontrará todas las imágenes en la posición de desplazamiento actual, y el intercambio la imagen src en una etiqueta img real.

Aquí está el código. Es no probado, pero esta debe ser la idea básica:

<img src="" realsrc="/myimage.png" /> 

$(document).ready(function(){ 

    $(window).scroll(function(){ 
    $('img[realsrc]').each(function(i){ 
     var t = $(this); 
     if(t.position().top > ($(window).scrollTop()+$(window).height()){ 
     t.attr('src', t.attr('realsrc')); // trigger the image load 
     t.removeAttr('realsrc'); // so we only process this image once 
     } 
    }); 
    }) 

}); 

Answer 3

solución simple que no depende de jQuery:

<script type="text/javascript"> 
     refresh_handler = function(e) { 
     var elements = document.querySelectorAll("*[realsrc]"); 
     for (var i = 0; i < elements.length; i++) { 
       var boundingClientRect = elements[i].getBoundingClientRect(); 
       if (elements[i].hasAttribute("realsrc") && boundingClientRect.top < window.innerHeight) { 
        elements[i].setAttribute("src", elements[i].getAttribute("realsrc")); 
        elements[i].removeAttribute("realsrc"); 
       } 
      } 
     }; 

     window.addEventListener('scroll', refresh_handler); 
     window.addEventListener('load', refresh_handler); 
    </script>