Edit in JSFiddle

function initImage(root_el) {
        var miniatureImg = root_el.querySelector(".progressiveMedia-thumbnail");
        var canvas = root_el.querySelector(".progressiveMedia-canvas");
        var placeholderFilDiv = root_el.previousElementSibling;
        var width = root_el.dataset.width;
        var height = root_el.dataset.height;
        drawMinatureForImage(miniatureImg, canvas, placeholderFilDiv, width, height);
}
function loadFullImage(root_el) {
		var fullImg = root_el.querySelector(".progressiveMedia-image"),
    canvas = root_el.querySelector(".progressiveMedia-canvas");
    
    fullImg.onload = function() {
    		fullImg.classList.remove("hidden");
        root_el.classList.add("full-loaded");
    }
    fullImg.src = fullImg.dataset.src;
}
    
function drawMinatureForImage(miniatureImg, canvas, placeholderFilDiv, width, height) {
    var fill = height / width * 100;
    placeholderFilDiv.style = 'padding-bottom:'+fill+'%;';

    var smImageWidth = miniatureImg.width,
    smImageheight = miniatureImg.height;

    canvas.height = smImageheight;
    canvas.width = smImageWidth;

    var img = new Image();
    img.onload = function () {
        var canvasImage = new CanvasImage(canvas, img);
        canvasImage.blur(2);
    };
    img.src = miniatureImg.src;
}

// source: pilpil.js
CanvasImage = function (canvasEL, image) {
    this.image = image;
    this.element = canvasEL;
    canvasEL.width = image.width;
    canvasEL.height = image.height;
    this.context = canvasEL.getContext('2d');
    this.context.drawImage(image, 0, 0);
};
CanvasImage.prototype = {
    blur:function(e) {
        this.context.globalAlpha = 0.5;
        for(var t = -e; t <= e; t += 2) {
            for(var n = -e; n <= e; n += 2) {
                this.context.drawImage(this.element, n, t);
                var blob = n >= 0 && t >= 0 && this.context.drawImage(this.element, -(n -1), -(t-1));
            }
        }
    }
};
var img = document.getElementById("ex1")
initImage(img);
loadFullImage(img);
<h2>
Progressively loaded image
</h2>
<div class="aspectRatioPlaceholder">
    <div class="aspectRatioPlaceholder-fill"></div>
    <div class="progressiveMedia full-absolute" id="ex1" data-width="3008" data-height="2000">
        <img class="progressiveMedia-thumbnail hidden" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QEoRXhpZgAATU0AKgAAAAgABgEPAAIAAAASAAAAVgEQAAIAAAAKAAAAaAESAAMAAAABAAEAAAEaAAUAAAABAAAAcgEbAAUAAAABAAAAeodpAAQAAAABAAAAggAAAABOSUtPTiBDT1JQT1JBVElPTgBOSUtPTiBENDAAAAAASAAAAAEAAABIAAAAAQAJgpoABQAAAAEAAAD0gp0ABQAAAAEAAAD8iCcAAwAAAAEAyAAAkAMAAgAAABQAAAEEkgkAAwAAAAEAAAAAkgoABQAAAAEAAAEYoAEAAwAAAAEAAQAAoAIABAAAAAEAAAAUoAMABAAAAAEAAAANAAAAAAAAAAEAAAB9AAAAHAAAAAUyMDA5OjA2OjA3IDExOjE0OjEyAAAAAFwAAAAB/+EJgmh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8APD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHBob3Rvc2hvcDpEYXRlQ3JlYXRlZD0iMjAwOS0wNi0wN1QxMToxNDoxMiIvPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDw/eHBhY2tldCBlbmQ9InciPz4A/+0AYFBob3Rvc2hvcCAzLjAAOEJJTQQEAAAAAAAnHAFaAAMbJUccAgAAAgACHAI8AAYxMTE0MTIcAjcACDIwMDkwNjA3ADhCSU0EJQAAAAAAEHuXWtdGLKdu038pP0Os8jT/wAARCAANABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9sAQwADAgICAgIDAgICAwMDAwQGBAQEBAQIBgYFBgkICgoJCAkJCgwPDAoLDgsJCQ0RDQ4PEBAREAoMEhMSEBMPEBAQ/9sAQwEDAwMEAwQIBAQIEAsJCxAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQ/90ABAAC/9oADAMBAAIRAxEAPwD5B0/4QabfXGsWOl2xLWyAAQ3AunLNko7An7uByFOcntXV/Fr4C6doui2Ot6d4utdUEsaw2UslsqWtyyR7ywdeQvBBb1HTFW/Beo6pqOpC0S/NtNCgvDcQxqryjaFCPgAHGQc8dKr+Jre7mt3ttR1O4uWknuLWOUHaYIom5CDlVL4+Y457g189DFNQacbyva7b+/dfcfe8EYHLeIsFPBUcH7TFJWblKyd09ea8eRJ7cqk3tJNW5fINQ8W6HpkyWMcsl08MSCV4I1ZA+MlcnqcEdOO3aq3/AAnmkf8APtd/9+U/xpniHRNO8Kam9jpdurW86i5Cz/OyE8bd3GR8vf1rN+2f9Odp/wB+z/jXQlQtqtT4irw5isPUlRqr3otp6rdaPv8Amf/Z"/>
        
        <img class="progressiveMedia-image full-absolute hidden" data-src="https://static.pexels.com/photos/56866/garden-rose-red-pink-56866.jpeg" />
        <canvas class="progressiveMedia-canvas full-absolute"></canvas>
    </div>
</div>
<p>
The above image is progressively loaded
</p>
.aspectRatioPlaceholder {
  position: relative;
  width: 100%;
  margin: 0 auto;
  display: block; 
}
.full-absolute {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.progressiveMedia-canvas {
	-webkit-transition: opacity 1s;
	transition: opacity 1s; 
}
.full-loaded .progressiveMedia-canvas {
	opacity: 0;
}
.hidden {
	display: none;
  	visibility: hidden;
}