Wie laden Sie Bilder nur, wenn sie sich im Ansichtsfenster befinden?

Question

Ich sehe heutzutage viele Websites, hauptsächlich Tutorial-Websites, die viele Bilder enthalten und nur Bilder weiter unten auf der Seite laden, sobald sie in den Ansichts-Port gelangen?

Wie würde ich das machen?

Ein Beispiel:

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

Wie Sie die Seite nach unten scrollen die Bilder unterhalb der Sichtöffnung verblassen in

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

Ersetzen Sie Ihre Bilder durch Platzhalter (z. Ändern Sie einfach das "src" -Attribut auf etwas anderes, damit das Bild nicht geladen wird, aber die URL immer noch zugänglich ist), und binden Sie dann das Fenster-Scroll-Ereignis an eine Funktion, die alle Bilder an der aktuellen Bildlaufposition findet und vertauscht das Bild src in ein echtes IMG-Tag.

Hier ist der Code. Es ist nicht getestet, aber die Grundidee sein sollte:

<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

einfache Lösung, die nicht auf JQuery abhängig:

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