lazy load - simple JS and CSS

by Himanshu Joshi

HTML

<body>
    <h1>Amalgam Comics Characters</h1>
<div id="listing">

    <div class="item">
        <img 
            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" 
            class="lazy" 
            data-src="http://static9.comicvine.com/uploads/scale_medium/0/229/305993-131358-dark-claw.jpg" 
            alt="Dark Claw"
            width="300px" />
        <noscript>
            <img 
                src="http://static9.comicvine.com/uploads/scale_medium/0/229/305993-131358-dark-claw.jpg" 
                alt="Dark Claw"
                width="300px" />
        </noscript>
        <span class="itemtitle">Dark Claw</span>
    </div>
    
    <div class="item">
        <img 
            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" 
            class="lazy" 
            data-src="http://static6.comicvine.com/uploads/scale_super/3/31666/706536-supersoldier8.jpg" 
            alt="Super Soldier"
            width="300px" />
        <noscript>
            <img 
                src="http://static6.comicvine.com/uploads/scale_super/3/31666/706536-supersoldier8.jpg" 
                alt="Super Soldier"
                width="300px" />
        </noscript>
        <span class="itemtitle">Super Soldier</span>
    </div>
    
    <div class="item">
        <img 
            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" 
            class="lazy" 
            data-src="http://static3.comicvine.com/uploads/scale_super/3/36899/732353-spidey.jpg" 
            alt="Spider Boy"
            width="300px" />
        <noscript>
            <img 
                src="http://static3.comicvine.com/uploads/scale_super/3/36899/732353-spidey.jpg" 
                alt="Spider Boy"
                width="300px" />
        </noscript>
        <span class="itemtitle">Spider Boy</span>
    </div>
    
    <div class="item">
        <img 
           ...

CSS

.item {width:300px; display: inline-block; }
        .item .itemtitle {font-weight:bold; font-size:2em;}
        .hidden {display:none;}

JavaScript

registerListener('load', lazyLoad);
registerListener('scroll', lazyLoad);

function lazyLoad(){
	    var lazy = 
	    document.getElementsByClassName('lazy');
	
	    for(var i=0; i<lazy.length; i++) {
	        if(isInViewport(lazy[i])){
               lazy[i].src =
                lazy[i].getAttribute('data-src');
            }
	    }
	 }

function isInViewport(el){
    var rect = el.getBoundingClientRect();
    
    return (
        rect.bottom >= 0 && 
        rect.right >= 0 && 
        rect.top <= (window.innerHeight || document.documentElement.clientHeight) && 
        rect.left <= (window.innerWidth || document.documentElement.clientWidth)
     );
}

function registerListener(event, func) {
    if (window.addEventListener) {
        window.addEventListener(event, func)
    } else {
        window.attachEvent('on' + event, func)
    }
}