Como pré-carregar imagens usadas apenas em foco?

14

Eu tenho um link que começa com uma imagem de plano de fundo e depois muda ao passar o mouse para outro. Ambas as imagens de fundo são definidas no CSS. Meus navegadores (qualquer um deles) não parecem carregar a imagem em foco até você realmente passar o mouse. Mas você acaba com uma imagem em branco por vários segundos (na minha conexão muito lenta) que leva para carregar a nova. Existe uma maneira de incentivar o navegador a pré-carregar a imagem em foco, para que o tempo de atraso não ocorra em foco?

css images load-time Daniel Bingham
fonte

Respostas:

17

1) Use CSS Sprites (este é o método preferido).

2) Carregue as imagens em uma div oculta. Coloque as imagens na div e defina o CSS da div display: none;para ocultá-la.

3) Carregue as imagens com CSS :

#preloadedImages
{
    width: 0px;
    height: 0px;
    display: inline;
    background-image: url(path/to/image1.png);
    background-image: url(path/to/image2.png);
    background-image: url(path/to/image3.png);
    background-image: url(path/to/image4.png);
    background-image: url();

}

4) Use este JavaScript

<script language="JavaScript">

function preloader() 
{
     // counter
     var i = 0;

     // create object
     imageObj = new Image();

     // set image list
     images = new Array();
     images[0]="image1.jpg"
     images[1]="image2.jpg"
     images[2]="image3.jpg"
     images[3]="image4.jpg"

     // start preloading
     for(i=0; i<=3; i++) 
     {
          imageObj.src=images[i];
     }
}
</script>
John Conde
fonte
Existe uma maneira de carregá-los após o carregamento da página? Para que o usuário não veja um círculo de carregamento no cursor? Uma maneira seria ter um quadro oculto que usa javascript para atrasar o quadro oculto a ser exibido, como na minha pergunta stackoverflow.com/questions/13437091/…, mas existe um método preferido para atrasar e não exibir o círculo de carregamento nesse cursor ?
Rise Against
Deixa pra lá, achei esse perishablepress.com/3-ways-preload-images-css-javascript-ajax e funciona perfeitamente com atraso de tempo.
Rise Against
10

Eu realmente não gosto da solução javascript - é confusa, difícil de manter e, é claro, falha completamente quando o JS está desativado.

A solução moderna é usar CSS Sprites - experimente, acredite, você se perguntará por que nunca fez isso antes;)

dmp
fonte
0

Adicione isso acima do seu CSS:

<script type="text/javascript">
var images = ['img1.jpg', 'img2.jpg'];

for(var i = 0, len = images.length; i < len; i++) {
  new Image().src = images[i];
}
</script>
<link rel="stylesheet" type="text/css" href="your_css_file.css" />

Se você seguir a rota do sprite, como danp sugere que você ainda tenha um problema ao carregar o sprite antes que seja necessário. Disse que eu amo sprites; para fazê-los facilmente, uso a ferramenta spriteme de Steve Souders:

Nisse Engström
fonte