Pure CSS: load images on-demand

by J. Albert Bowden

HTML

<!-- images to fill first two screens -->

<img src="http://ts2.mm.bing.net/th?id=H.4682013605233249&pid=1.7&w=148&h=148&c=7&rs=1"/>
    <img src="http://ts4.mm.bing.net/th?id=H.4506405299356411&pid=1.7&w=148&h=148&c=7&rs=1"/>
    <img src="http://ts1.mm.bing.net/th?id=H.4801155983673928&pid=1.7&w=148&h=148&c=7&rs=1"/>
    <img src="http://ts4.mm.bing.net/th?id=H.4648388318858331&pid=1.7&w=148&h=148&c=7&rs=1"/>
    <img src="http://ts4.mm.bing.net/th?id=H.4519217168582031&pid=1.7&w=148&h=148&c=7&rs=1"/>
    <img src="http://ts3.mm.bing.net/th?id=H.4882257798695666&pid=1.7&w=148&h=148&c=7&rs=1"/>
    <img src="http://ts1.mm.bing.net/th?id=H.4863119490744652&pid=1.7&w=148&h=148&c=7&rs=1" />
    <img src="http://ts3.mm.bing.net/th?id=H.4912820822868850&pid=1.7&w=148&h=148&c=7&rs=1"/>
    <img src="http://ts1.mm.bing.net/th?id=H.4521699661709560&pid=1.7&w=148&h=148&c=7&rs=1"/>
    <img src="http://ts3.mm.bing.net/th?id=H.4792084997669602&pid=1.7&w=148&h=148&c=7&rs=1"/>

<!-- images to load on demand -->
<div class="lazy-load">
    <div class="hoverer">
            <iframe class="status-keeper" srcdoc="            
            <style>
                * { margin: 0; padding: 0; }                
                a {
                    display:none;
                }
                @media (min-width:50px) { 
                    a {
                        display: block;
                    }
                } 
                .img {
                    background: url('http://ts3.mm.bing.net/th?id=H.4948185586796790&pid=1.7&w=148&h=148&c=7&rs=1') no-repeat;
                    width: 148px;
                    height: 148px;
                }
            </style>
        
    <a><div class='img'></div></a>"></iframe>
    </div>
    <div class="hoverer">
            <iframe class="status-keeper" srcdoc="            
            <style>
                * { margin: 0; padding: 0; }                   
                a {
                    display:none;
               ...

CSS

html, body {
    height: 100%;
    position: relative;
}

/* Style normal images which will be loaded initially for first two screens. */
img {
    display: block;
    width: 148px;
    height: 148px;
    margin: 5px;
    z-index: 1;
}

/* Container for lazy load images */
.lazy-load {
    position: absolute;
    left: 0;
    right: 0;
    top: 100vh;
}

/* Trigger for some particular image to laod */
.hoverer {
    position: relative;
    width: 100%;
    height: 155px;
    -border: solid 1px green;
    z-index: 999;    
}

/* iframe which keep its size once resized */
.status-keeper {
    position: absolute;
    top: 100vh;
    width: 0px;
    height: 100%;
    transition: width 0s 9999s;
    border: 0px;
}

.hoverer:hover > .status-keeper {
    width: 148px;
    transition: width 0s;
}