Come si caricano le immagini solo quando sono nella vista?

Question

Attualmente vedo molti siti, principalmente siti di tutorial che hanno un sacco di immagini e caricano solo le immagini più in basso nella pagina una volta entrate nella porta di visualizzazione?

Come faccio a fare questo?

Un esempio:

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

Mentre si scorre in basso nella pagina le immagini qui sotto la dissolvenza vista porto a

Answer 1

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

Demo:
http://www.appelsiini.net/projects/lazyload/enabled.html

Answer 2

Sostituisci le immagini con i segnaposti (ad es. basta cambiare l'attributo "src" a qualcos'altro per non caricare l'immagine, ma l'url sarà comunque accessibile), e quindi associare l'evento di scorrimento della finestra a una funzione che troverà tutte le immagini nella posizione di scorrimento corrente e scambiare l'immagine src in un vero tag img.

Ecco il codice. E 'testato, ma questo dovrebbe essere l'idea di base:

<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

soluzione semplice che non dipende da 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>