CDN Connect Images

by adamdbradley

HTML

<image data-src="//rayovac.cdnconnect.com/images/test.jpg" />
<image data-src="//rayovac.cdnconnect.com/images/test2.jpg" />

CSS

img[data-src] {
    width:25%;
}

JavaScript

(function(document, window) {

    window.$cc = window.$cc || {};

    var
    x, l, browserWidth, imgEle, source, id, sourceType, dpr,
    images = [],
    groupedRequestLimit = 5,
    cssShow = { visibility: "hidden", position: "absolute", display: "block" },

    init = function() {
        if ($cc.initStatus) return;
        $cc.initStatus = true;

        for (x = 0, l = document.images.length; x < l; x++) {
            imgEle = document.images[x];
            source = imgEle.getAttribute('data-src');
            if (source) {
                if (imgEle.offsetWidth !== 0) {
                    browserWidth = imgEle.offsetWidth;
                } else {
                    var name, old = {};
                    for (name in cssShow) {
                        old[name] = imgEle.style[name];
                        imgEle.style[name] = cssShow[name];
                    }
                    browserWidth = imgEle.offsetWidth;
                    for (name in cssShow) {
                        imgEle.style[name] = old[name];
                    }
                }
                if (browserWidth) {
                    images.push({
                        ele: imgEle,
                        source: source,
                        browserWidth: browserWidth
                    });
                }
            }
        }

        if (images.length) {
            sourceType = 'src';
            dpr = window.devicePixelRatio ? window.devicePixelRatio : 1;
            var b = document.createElement('b');
            b.innerHTML = '<!--[if lt IE 9]>lt9';
            if(b.innerHTML === 'lt9') {
                loadImages();
            } else {
                var dataImage = new Image();
                dataImage.onload = dataImage.onerror = function(){
                    if(this.width > 1){
                        sourceType = 'datauri';
                    }
                    loadImages();
                }
                dataImage.src =...