Javascript-форум - Загрузка картинки лучшего качества по клику

код в минималистическом стиле ))) -- вместо всякой хрени поставьте ссылки на картинки с низким качеством - по клику появится прелодер, когда картинка лучшего качества загрузится сработает css трансформация и исчезнет прелодер
по второму клику картинка займёт прежнее место загружать больше не будет.
:write: ... картинки не вечны и onerror не предусмотрен, можно использовать как простой увеличитель по клику))) css настройте по своему вкусу.

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .gallery img{
    width: 150px;
    height: 100px;
    float:left;
    -webkit-transition: all 3s ease-in-out;
    -moz-transition: all 3s ease-in-out;
    -o-transition: all 3s ease-in-out;
    -ms-transition: all 3s ease-in-out;
    transition: all 3s ease-in-out;
  }
  img.loading{
    width: 100px;
    height: 70px;
    position: absolute;
  }
  </style>
  <script>
window.onload = function () {
    function k(c) {
        c = c.getBoundingClientRect();
        var a = document.body,
            b = document.documentElement,
            e = c.left + (window.pageXOffset || b.scrollLeft || a.scrollLeft) - (b.clientLeft || a.clientLeft || 0);
        return {
            top: Math.round(c.top + (window.pageYOffset || b.scrollTop || a.scrollTop) - (b.clientTop || a.clientTop || 0)),
            left: Math.round(e)
        }
    }
    for (var h = function () {
        var c, a = document.createElement("fakeelement"),
            b = {
                transform: "transform",
                OTransform: "OTransform",
                MozTransform: "MozTransform",
                webkitTransform: "webkitTransform",
                msTransform: "msTransform"
            };
        for (c in b)
            if (void 0 !== a.style[c]) return b[c];
        return "transform"
    }(), n = function (c) {
            var a = g[c],
                b = new Image,
                f = a.parentNode;
            b.src = "http://pampinta.com/imgs/img_loader.gif";
            return function l() {
                var d = k(a);
                b.style.left = 20 + d.left + "px";
                b.style.top = 40 + d.top + "px";
                b.classList.add("loading");
                f.appendChild(b);
                d = new Image;
                d.addEventListener("load", function () {
                    function d() {
                        e && (e.style[h] = "");
                        this.style[h] = e == this ? (e = null, "") : (e = this, "scale(3) translateY(100px) translateX(" + (100 + -50 * c) + "px)")
                    };
                    f.removeChild(b);
                    a.src = this.src;
                    a.removeEventListener("click", l, !1);
                    a.addEventListener("click", d, !1);
                    d.call(a)
                }, !1);
                var g = a.getAttribute("data-src") || m[c] || a.src;
                d.src = g + "?" + Math.random();//убрать + "?" + Math.random() если нужен кеш
                d.complete && d.onload()
            }
        }, g = document.querySelectorAll(".gallery img"), //картинки для которых нужна загрузка
           m = ["http://stat17.privet.ru/lr/0a0cd32bec610080b2aea5cb20b0ff4e",//массив ссылок src лучшего качества - можно прописать ссылку в data-src самой картинки - можно не прописывать нигде,оставить пустой массив
                "http://w7t.ru/zooms/7da1/7/6168262b44.jpg",
                "http://luxfon.com/large/201203/5938.jpg",
                "http://picsfab.com/download/image/15310/1920x1200_kubok-fifa.jpg",
                "http://www.vashsad.ua/i/gallery/wallpapers/24/1280_800/L558J859.jpg"], e, f = 0; f < g.length; f++) {
        var p = g[f],
            q = n(f);
        p.addEventListener("click", q, !1)
    }
};
  </script>
</head>

<body>
<div class="gallery">
<img src="http://frame3.loadup.ru/44/bf/1027325.2.3.jpg" alt="" data-src='http://cdn.desktopwallpapers4.me/wallpapers/cartoons/1366x768/2/13700-puss-in-boots-shrek-1366x768-cartoon-wallpaper.jpg'/>
<img src="http://frame3.loadup.ru/44/bf/1027325.2.3.jpg" alt="" />
<img src="http://frame3.loadup.ru/44/bf/1027325.2.3.jpg" alt="" />
<img src="http://frame3.loadup.ru/44/bf/1027325.2.3.jpg" alt="" />
<img src="http://frame3.loadup.ru/44/bf/1027325.2.3.jpg" alt="" />
</div>
</body>
</html>