Skip to content

Instantly share code, notes, and snippets.

@ethyde

ethyde/vanilla-lazy-load.html

Forked from rposbo/vanilla-lazy-load.html
Last active May 16, 2016 15:19
Show Gist options
  • Save ethyde/95d1824b313bf569601fe6fafa3d18b4 to your computer and use it in GitHub Desktop.
Save ethyde/95d1824b313bf569601fe6fafa3d18b4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ethyde revised this gist May 16, 2016. No changes.
  2. @rposbo rposbo revised this gist Mar 23, 2016. 1 changed file with 13 additions and 35 deletions.
    48 changes: 13 additions & 35 deletions vanilla-lazy-load.html
    View file
    Original file line number Diff line number Diff line change
    @@ -10,62 +10,40 @@
    <h1>Amalgam Comics Characters</h1>
    <div id="listing">

    <!-- first few items are loaded normally -->
    <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"
    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"
    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"
    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>

    <!-- everything after this is lazy -->
    <div id="viewMore">
    <a href="flatpage.html#more">View more</a>
    </div>
    <span id="nextPage" class="hidden">

    <div class="item">
    <img
    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
    src="http://spacergif.org/spacer.gif"
    class="lazy"
    data-src="http://vignette1.wikia.nocookie.net/amalgam/images/7/7c/Iron_Lantern.jpg/revision/latest?cb=20110828093145"
    alt="Iron Lantern"
    @@ -81,7 +59,7 @@ <h1>Amalgam Comics Characters</h1>

    <div class="item">
    <img
    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
    src="http://spacergif.org/spacer.gif"
    class="lazy"
    data-src="http://static6.comicvine.com/uploads/scale_super/0/1867/583722-amalgam_amazon1.jpg"
    alt="Amazon"
    @@ -97,7 +75,7 @@ <h1>Amalgam Comics Characters</h1>

    <div class="item">
    <img
    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
    src="http://spacergif.org/spacer.gif"
    class="lazy"
    data-src="http://static4.comicvine.com/uploads/scale_super/0/1867/583727-bizarnage1.jpg"
    alt="Bizarnage"
    @@ -113,7 +91,7 @@ <h1>Amalgam Comics Characters</h1>

    <div class="item">
    <img
    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
    src="http://spacergif.org/spacer.gif"
    class="lazy"
    data-src="http://static1.comicvine.com/uploads/scale_super/0/1867/583724-amcatsai1.jpg"
    alt="Catsai"
    @@ -129,7 +107,7 @@ <h1>Amalgam Comics Characters</h1>

    <div class="item">
    <img
    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
    src="http://spacergif.org/spacer.gif"
    class="lazy"
    data-src="http://static4.comicvine.com/uploads/scale_super/0/1867/583743-moonwing1.jpg"
    alt="Moonwing"
    @@ -145,7 +123,7 @@ <h1>Amalgam Comics Characters</h1>

    <div class="item">
    <img
    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
    src="http://spacergif.org/spacer.gif"
    class="lazy"
    data-src="http://static5.comicvine.com/uploads/scale_super/0/1867/583739-hawkeyei.jpg"
    alt="Hawkeye"
    @@ -161,7 +139,7 @@ <h1>Amalgam Comics Characters</h1>

    <div class="item">
    <img
    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
    src="http://spacergif.org/spacer.gif"
    class="lazy"
    data-src="http://static3.comicvine.com/uploads/scale_super/0/1867/583733-ammrcury1.jpg"
    alt="Mercury"
    @@ -177,7 +155,7 @@ <h1>Amalgam Comics Characters</h1>

    <div class="item">
    <img
    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
    src="http://spacergif.org/spacer.gif"
    class="lazy"
    data-src="http://static2.comicvine.com/uploads/scale_super/0/1867/583737-drfate3.jpg"
    alt="Dr. Strangefate"
  3. @rposbo rposbo created this gist Mar 23, 2016.
    250 changes: 250 additions & 0 deletions vanilla-lazy-load.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,250 @@
    <html>
    <head>
    <style>
    .item {width:300px; display: inline-block; }
    .item .itemtitle {font-weight:bold; font-size:2em;}
    .hidden {display:none;}
    </style>
    </head>
    <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 id="viewMore">
    <a href="flatpage.html#more">View more</a>
    </div>
    <span id="nextPage" class="hidden">

    <div class="item">
    <img
    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
    class="lazy"
    data-src="http://vignette1.wikia.nocookie.net/amalgam/images/7/7c/Iron_Lantern.jpg/revision/latest?cb=20110828093145"
    alt="Iron Lantern"
    width="300px" />
    <noscript>
    <img
    src="http://vignette1.wikia.nocookie.net/amalgam/images/7/7c/Iron_Lantern.jpg/revision/latest?cb=20110828093145"
    alt="Iron Lantern"
    width="300px" />
    </noscript>
    <span class="itemtitle">Iron Lantern</span>
    </div>

    <div class="item">
    <img
    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
    class="lazy"
    data-src="http://static6.comicvine.com/uploads/scale_super/0/1867/583722-amalgam_amazon1.jpg"
    alt="Amazon"
    width="300px" />
    <noscript>
    <img
    src="http://static6.comicvine.com/uploads/scale_super/0/1867/583722-amalgam_amazon1.jpg"
    alt="Amazon"
    width="300px" />
    </noscript>
    <span class="itemtitle">Amazon</span>
    </div>

    <div class="item">
    <img
    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
    class="lazy"
    data-src="http://static4.comicvine.com/uploads/scale_super/0/1867/583727-bizarnage1.jpg"
    alt="Bizarnage"
    width="300px" />
    <noscript>
    <img
    src="http://static4.comicvine.com/uploads/scale_super/0/1867/583727-bizarnage1.jpg"
    alt="Bizarnage"
    width="300px" />
    </noscript>
    <span class="itemtitle">Bizarnage</span>
    </div>

    <div class="item">
    <img
    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
    class="lazy"
    data-src="http://static1.comicvine.com/uploads/scale_super/0/1867/583724-amcatsai1.jpg"
    alt="Catsai"
    width="300px" />
    <noscript>
    <img
    src="http://static1.comicvine.com/uploads/scale_super/0/1867/583724-amcatsai1.jpg"
    alt="Catsai"
    width="300px" />
    </noscript>
    <span class="itemtitle">Catsai</span>
    </div>

    <div class="item">
    <img
    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
    class="lazy"
    data-src="http://static4.comicvine.com/uploads/scale_super/0/1867/583743-moonwing1.jpg"
    alt="Moonwing"
    width="300px" />
    <noscript>
    <img
    src="http://static4.comicvine.com/uploads/scale_super/0/1867/583743-moonwing1.jpg"
    alt="Moonwing"
    width="300px" />
    </noscript>
    <span class="itemtitle">Moonwing</span>
    </div>

    <div class="item">
    <img
    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
    class="lazy"
    data-src="http://static5.comicvine.com/uploads/scale_super/0/1867/583739-hawkeyei.jpg"
    alt="Hawkeye"
    width="300px" />
    <noscript>
    <img
    src="http://static5.comicvine.com/uploads/scale_super/0/1867/583739-hawkeyei.jpg"
    alt="Hawkeye"
    width="300px" />
    </noscript>
    <span class="itemtitle">Hawkeye</span>
    </div>

    <div class="item">
    <img
    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
    class="lazy"
    data-src="http://static3.comicvine.com/uploads/scale_super/0/1867/583733-ammrcury1.jpg"
    alt="Mercury"
    width="300px" />
    <noscript>
    <img
    src="http://static3.comicvine.com/uploads/scale_super/0/1867/583733-ammrcury1.jpg"
    alt="Mercury"
    width="300px" />
    </noscript>
    <span class="itemtitle">Mercury</span>
    </div>

    <div class="item">
    <img
    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
    class="lazy"
    data-src="http://static2.comicvine.com/uploads/scale_super/0/1867/583737-drfate3.jpg"
    alt="Dr. Strangefate"
    width="300px" />
    <noscript>
    <img
    src="http://static2.comicvine.com/uploads/scale_super/0/1867/583737-drfate3.jpg"
    alt="Dr. Strangefate"
    width="300px" />
    </noscript>
    <span class="itemtitle">Dr. Strangefate</span>
    </div>

    </span>
    </div>

    <script>
    var lazy = [];

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

    function setLazy(){
    document.getElementById('listing').removeChild(document.getElementById('viewMore'));
    document.getElementById('nextPage').removeAttribute('class');

    lazy = document.getElementsByClassName('lazy');
    console.log('Found ' + lazy.length + ' lazy images');
    }

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

    cleanLazy();
    }

    function cleanLazy(){
    lazy = Array.prototype.filter.call(lazy, function(l){ return l.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)
    }
    }
    </script>
    </body>
    </html>