Jak ładować obrazy tylko w widoku?

Question

Ostatnio widzę wiele witryn, głównie tutoriali, które mają wiele obrazów i ładują obrazy tylko na dole strony, gdy wejdą do portu widoku?

Jak miałbym to zrobić?

Przykład:

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

Jak przewinąć stronę w dół obrazy poniżej znikną widok portu w

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

Zastąp swoje obrazy symbolami zastępczymi (np. wystarczy zmienić atrybut "src" na coś innego, aby obraz nie został załadowany, ale adres url będzie nadal dostępny), a następnie powiązać zdarzenie przewijania okna z funkcją, która znajdzie wszystkie obrazy w bieżącej pozycji przewijania i zamienić obraz src do prawdziwego tagu img.

Oto kod. To niesprawdzone, ale powinno to być podstawowa idea:

<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

Proste rozwiązanie, które nie zależy od 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>