код в минималистическом стиле ))) -- вместо всякой хрени поставьте ссылки на картинки с низким качеством - по клику появится прелодер, когда картинка лучшего качества загрузится сработает css трансформация и исчезнет прелодер
по второму клику картинка займёт прежнее место загружать больше не будет.
... картинки не вечны и 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>
