Lazy loading images

gistfile1.txt

// HTML

<a href="#" class="lazyimage">
    <div class="placeholder" data-large="fullsize.jpg">
      <img src="small.jpg" class="img-small">
      <div style="padding-bottom: 39.47%;"></div>
      <!-- % calculated from ratio eg. 450/1140px -->
    </div>
</a>


// CSS

.lazyimage {
    .placeholder {
        background-color: #ccc;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
        overflow: hidden;
    }

    .placeholder img {
        position: absolute;
        opacity: 0;
        top: 0;
        left: 0;
        width: 100%;
        transition: opacity 1s linear;
    }

    .placeholder img.loaded {
        opacity: 1;
    }

    .img-small {
        filter: blur(50px);
        transform: scale(1);
    }
}


// JS

if($(".lazyimage").length) {
    $(".lazyimage").each(function(index) {

        var placeholder = $(this).find($(".placeholder")),
            small = $(this).find($(".img-small"));

        var img = new Image();
        img.src = small.src;
        img.onload = function () {
         small.classList.add('loaded');
        };

        var imgLarge = new Image();
        imgLarge.src = placeholder.attr("data-large");
        imgLarge.onload = function () {
          imgLarge.classList.add('loaded');
        };
        placeholder.append(imgLarge);
    });
}