Traduzido de: Criando um pré-carregador de imagem CSS
Chinês: pré-carregamento de imagem CSS puro
Há muitas maneiras de implementar o pré-carregamento de imagens, geralmente usando Javascript para manter a rolagem. Não fique mais limitado pelo pré-carregamento de Javascript, use CSS e você poderá pré-carregar suas imagens sem complicações.
Por que usar o pré-carregamento
Por que você consideraria usar o pré-carregamento? Você já teve um site onde você tinha que rolar a navegação e depois demorava até que as imagens fossem carregadas...hehehe. O pré-carregamento irá ajudá-lo nesse aspecto. Ele carregará essas imagens quando a página carregar e as armazenará no cache do navegador. Desta forma, quando o usuário rolar a navegação, ela ficará bonita e suave, sem demora.
Código CSS
O conceito é escrever um estilo CSS para definir um monte de imagens de fundo e depois ocultá-las para que você não possa ver essas imagens. Essas imagens de fundo são as imagens que você deseja pré-carregar.
Aqui está um exemplo:
#pré-carregador {
/* Imagens que você deseja pré-carregar*/
imagem de fundo: url(image1.jpg);
imagem de fundo: url(image2.jpg);
imagem de fundo: url(image3.jpg);
largura: 0px;
altura: 0px;
exibição: embutido;
}
Esta é apenas uma forma de ocultar suas imagens para que não sejam exibidas. Também vi pessoas usarem valores de posição de fundo muito grandes para enviar imagens. Ou forneça um valor de margem negativo. Existem muitas maneiras de ocultar as imagens que deseja pré-carregar, escolha a que melhor lhe convier.
outra situação
Não acontece com muita frequência que você tenha uma imagem enorme para baixar, se seguir a abordagem usual de fornecer algum tipo de indicação de que a imagem está carregando. Aqui estão alguns CSS para dar ao usuário uma dica de que a imagem está carregando.
img { background: url(loadingHourGlass.gif) sem repetição 50% 50% };
As imagens GIF podem ser animadas, semelhantes a coisas como bolas de praia em um Mac ou ampulhetas em um PC. Use uma animação para que o usuário saiba que algo está acontecendo.
para concluir
Faça o seu melhor quando o pré-carregamento fizer sentido e seus usuários irão adorar você por isso. Na verdade eles podem não perceber, mas isso é bom, se eles perceberem que seu site está carregando, provavelmente está muito lento.
Ver demonstração
Notas especiais sobre o Exemplo 1
Primeiramente, obrigado pelas dúvidas levantadas pelos internautas nos comentários. Depois de traduzir este artigo, considerando que o mesmo atributo é definido diversas vezes em uma regra CSS, os navegadores geralmente processam apenas o último, decidi que era necessário. fiz um teste, mas não percebi o que estava acontecendo. Devido à gravidade do assunto, não foi resolvido a tempo, o que pode causar alguns mal-entendidos.
De acordo com meus testes, a maioria dos navegadores carrega apenas a última imagem e as duas primeiras imagens são ignoradas . Mas em navegadores webkit-core, como o Chrome, essas três imagens serão pré-carregadas. O exemplo 1 nos fornece uma boa ideia para resolver o problema , mas para carregar várias imagens no mesmo estilo CSS, podemos ter que esperar até que os vários atributos de imagem de fundo do CSS3 sejam suportados por mais navegadores.
PS: Deixe-me explicar esta demonstração. Talvez o autor original não tenha pensado muito e apenas quisesse demonstrar o efeito do pré-carregamento, então esta página de demonstração foi um pouco simples: ele apenas usou a imagem pré-carregada como plano de fundo de a:hover, para que quando o mouse passasse isto, Pode piscar a realidade dessa imagem. Bem, esse é o segundo uso no artigo...