ensure image ratio before load

image-ratio.js

// ussage:
// - include this script
// - add the data-c1-ratio-attribute to your images
// <img src="big.jpg" data-c1-ratio="1.245" style="width:200px; max-width:100%">

!function(){
    'use strict';
    var listener = function(e){
        this.removeEventListener('load',listener);
        this.removeEventListener('error',listener);
      	this.src = this.c1RealSrc;
    }
    function calc(){
        var all = document.querySelectorAll('[data-c1-ratio]'),
            i = 0, el, ratio;
        for (;el=all[i++];) {
            if (el.complete) continue;
            ratio = el.getAttribute('data-c1-ratio');
            if (!ratio) return;
            if (el.c1RealSrc) return;
            el.c1RealSrc = el.src;
            el.addEventListener('load',listener);
            el.addEventListener('error',listener); // not working in ie 11, bad browser
            el.src = 'data:image/svg+xml;utf8,'+encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="'+ratio*1024+'" height="1024" style="background:rgba(222,222,222,.2);"></svg>');
        }
    }
    window.requestAnimationFrame && requestAnimationFrame(calc);
    document.addEventListener('DOMContentLoaded',calc);
    // todo: mutation observer?
}();