Olha, acredito que o melhor seja fazer um pre-carregamento das imagens de cache e error e passar a carregar as imagens através de um JavaScript.
var loading = "http://cdn.flaticon.com/png/256/12334.png";
var error = "http://cdn.flaticon.com/png/256/9188.png";
var images = document.querySelectorAll("[data-src]");
[].forEach.call(images, function (image, indice) {
var load = new Image();
image.src = loading;
//simulando um delay... senão a imagem de load não vai ficar visivel.
//o setTimeout nos eventos abaixo é desnecessario.
var delay = 0;
if (image.dataset.delay)
delay = parseInt(image.dataset.delay);
load.addEventListener("load", function (event) {
window.setTimeout(function () {
image.src = load.src;
}, delay);
});
load.addEventListener("error", function (event) {
window.setTimeout(function () {
image.title = "erro ao carregar a imagem";
image.src = error;
}, delay);
});
load.src = image.dataset.src;
})
.preload-loading {
background-image: url(http://cdn.flaticon.com/png/256/12334.png);
background-repeat: no-repeat;
}
.preload-error {
background-image: url(http://cdn.flaticon.com/png/256/9188.png);
background-repeat: no-repeat;
}
img {
width: 256px;
height: 256px;
background-color: whitesmoke;
border: 1px solid gainsboro;
border-radius: 10px;
overflow: none;
padding: 5px;
}
<img data-src="http://cdn.flaticon.com/png/256/97199.png" data-delay="250" title="Verão" />
<img data-src="http://cdn.flaticon.com/png/256/63511.png" data-delay="500" title="Inverno" />
<img data-src="http://cdn.flaticon.com/png/256/83554.png" data-delay="250" title="Primavera" />
<img data-src="http://cdn.flaticon.com/png/256/2130.png" data-delay="750" title="Outono" />
<img data-src="http://cdn.flaticon.com/png/256/notfound.png" data-delay="1000" title="Outono" />
As classes preload-loading
e preload-error
devem está presentes em algum arquivo de "CSS global", para que as imagens já sejam carregadas pelo Browser antes que a pagina com as imagens sejam carregadas.
A propriedade data-delay
e a chamada ao window.setTimeout
são desnecessários, coloquei eles apenas para deixar o exemplo mais rico.
Se usar o script acima, as imagens só serão associdadas aos seus devidos elementos, somente apos carregadas e prontas para exibição.