Skip to main content
adicionou 5 caracteres ao conteúdo
Fonte Link
Tobias Mesquita
  • 23,1mil
  • 1
  • 32
  • 52
var loading = "http://cdn.flaticon.com/png/256/12334.png";
var error = "http://cdn.flaticon.com/png/256/9188.png";

var onImageLoad = function (event) {   
  var target = event.target || event.srcElement;
  window.setTimeout(function () {
    target.image.src = target.src;
  }, target.delay);
}

var onImageError = function (event) {
  var target = event.target || event.srcElement;
  window.setTimeout(function () {
    target.image.title = "erro ao carregar a imagem";
    target.image.src = error;
  }, target.delay);
}

var images = document.querySelectorAll("[data-src]");
[].forEach.call(images, function (image, indice) {
  var loadimg = new Image();
  img.image = image;
  img.image.src = loading;   
  
  //simulando um delay... senão a imagem de load não vai ficar visivel.
  //o setTimeout nos eventos abaixo é desnecessario.
  var img.delay = 0;
  if (img.image.dataset.delay)
    img.delay = parseInt(img.image.dataset.delay); 

  loadimg.addEventListener("load", function (event) {   
    window.setTimeout(function () {
      image.src = load.src;
    }, delay);
  }onImageLoad);    
  loadimg.addEventListener("error", function (event) {
    window.setTimeout(function () {
      image.title = "erro ao carregar a imagem";
      image.src = error;
    }, delay);
  }onImageError);
  loadimg.src = img.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" />
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" />
var loading = "http://cdn.flaticon.com/png/256/12334.png";
var error = "http://cdn.flaticon.com/png/256/9188.png";

var onImageLoad = function (event) {   
  var target = event.target || event.srcElement;
  window.setTimeout(function () {
    target.image.src = target.src;
  }, target.delay);
}

var onImageError = function (event) {
  var target = event.target || event.srcElement;
  window.setTimeout(function () {
    target.image.title = "erro ao carregar a imagem";
    target.image.src = error;
  }, target.delay);
}

var images = document.querySelectorAll("[data-src]");
[].forEach.call(images, function (image, indice) {
  var img = new Image();
  img.image = image;
  img.image.src = loading;   
  
  //simulando um delay... senão a imagem de load não vai ficar visivel.
  //o setTimeout nos eventos abaixo é desnecessario.
  img.delay = 0;
  if (img.image.dataset.delay)
    img.delay = parseInt(img.image.dataset.delay); 

  img.addEventListener("load", onImageLoad);    
  img.addEventListener("error", onImageError);
  img.src = img.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" />
adicionou 5 caracteres ao conteúdo
Fonte Link
Tobias Mesquita
  • 23,1mil
  • 1
  • 32
  • 52

Olha, acredito que o melhor seja fazer um pre-carregamento das imagens de cacheloading e de error e passar a carregar as imagens através de um JavaScript.

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.

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.

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

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.