0

Estou testando um slide de imagens, estou alterando dinamicamente o background usando a função "css" do jquery trocando o url("caminho da imagem"); Mas percebi que sempre que há a troca, ele baixa a imagem novamente. Tem deixar o background já baixado e utiliza-lo sem precisar ficar fazendo requisição a todo momento? Não liguem, tá feio mesmo. http://codepen.io/rogeralbinoi/pen/Hlpft?editors=101

esse é o mesmo funcionando usando a tag img ao invés de background: http://codepen.io/rogeralbinoi/pen/kbIDp

1
  • Verifique se os headers da imagem estão permitindo que ela seja guardada no cache. Além do que já foi respondido, este é um fator a ser considerado.
    – Largato
    Commented 13/06/2014 às 13:19

2 Respostas 2

2

Script em Javascript puro para preload de image.

<script type="text/JavaScript">
function MM_preloadImages() { 
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>

Como chamar:

<body onload="MM_preloadImages('2.jpg','1.jpg')">

Exemplo:

http://jsfiddle.net/gDGbz/1/

Ja deixo na body chamando uma imagem que é grande e se fosse fazer isso em tempo real demoraria para aparecer.

1

Existem algumas formas de realizar o preload de imagens no navegador. É possível utilizar apenas CSS - mas deixa um pouco de "sujeira" no seu código, pois precisamos colocar algumas tags para se realizar o carregamento.

<div id="preload1"></div>
<div id="preload2"></div>
...

#preload1{
    background:url('http://lorempixel.com/1366/590/fashion/2') no-repeat -9999px -9999px;
}
#preload2{
    background:url('http://lorempixel.com/1366/590/fashion/3') no-repeat -9999px -9999px;
}
...

Também é possível utilizar JavaScript:

imagem1 = new Image();
imagem1.src = "http://lorempixel.com/1366/590/fashion/2";
imagem2 = new Image();
imagem2.src = "http://lorempixel.com/1366/590/fashion/2";

JavaScript pode deixar as coisas mais sofisticadas. Vamos utilizar uma array:

preload = [
    "http://lorempixel.com/1366/590/fashion/2",
    "http://lorempixel.com/1366/590/fashion/3",
    "http://lorempixel.com/1366/590/fashion/4"
    ];

imagens = [];

for(i in preload){

    imagens[i] = new Image();
    imagens[i].src = preload[i]; //carrega a imagem corresponte ao número


}
1
  • 1
    Muito bom! Obrigado, nem lembrava que dava pra fazer isso.
    – rgralb
    Commented 12/06/2014 às 13:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .