Skip to main content
2 de 3
adicionou 5 caracteres ao conteúdo
Tobias Mesquita
  • 23,1mil
  • 1
  • 32
  • 52

Olha, acredito que o melhor seja fazer um pre-carregamento das imagens de loading e de 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.

Tobias Mesquita
  • 23,1mil
  • 1
  • 32
  • 52