A rapidez com que uma página da Web e todo o seu conteúdo são carregados depende de um grande número de fatores e alguns deles estarão fora do seu controle. No entanto, devemos tentar o nosso melhor como desenvolvedores da Web para tornar a experiência de navegação o mais perfeita possível.
Neste tutorial, mostrarei diferentes técnicas para pré-carregar imagens em uma página da Web para uma experiência de usuário tranquila.
A necessidade de pré-carregar imagens
Começaremos o tutorial discutindo primeiro por que você pode precisar pré-carregar imagens.
Digamos que você esteja criando um site de portfólio para um corretor de imóveis, onde eles podem mostrar casas à venda. O agente quer que você mostre uma lista de casas com uma imagem do exterior das casas. Eles também querem que você projete a página de forma que, ao passar o mouse sobre a imagem de uma casa, carregue outra imagem do interior da casa com um link para ver todas as outras imagens.
O problema aqui é que a imagem do interior da casa só vai começar a carregar quando o usuário passar o mouse sobre a imagem. Isso significa que eles não verão nenhuma imagem por alguns momentos após o evento de foco inicial, dependendo da velocidade da Internet. Você pode ver esse problema na seguinte demonstração do CodePen:
O pré-carregamento das imagens evitará esse atraso no carregamento da imagem ao passar o mouse. Além disso, algumas imagens grandes podem demorar um pouco para carregar, por isso é melhor pré-carregá-las para uma melhor experiência do usuário.
Pré-carregando imagens usando HTML
Você provavelmente já está familiarizado com o link marca em HTML. Geralmente o usamos para carregar uma folha de estilo CSS externa, mas você também pode usá-lo para carregar outros tipos de recursos. Existem dois atributos importantes do link marcação.
o href atributo que é usado para fornecer o caminho para o recurso que queremos buscar e o rel atributo que especifica a relação do recurso com o documento que o contém. Com uma folha de estilo CSS, a tag do link fica assim:
1 |
|
o rel O atributo pode receber muitos valores válidos. Uma delas é preload que usaremos para pré-carregar nossas imagens. o preload O atributo informa ao navegador para buscar e armazenar em cache preventivamente o recurso vinculado, pois ele será necessário na página atual.
Você também precisa do as atributo quando o valor de rel atributo é definido como preload. Isso especificará o tipo de conteúdo que está sendo carregado pelo link marcação. Esse atributo serve a muitos propósitos importantes, como aplicar a política de segurança de conteúdo correta, priorizar a solicitação, etc. Ignorá-lo pode impedir que sua imagem seja pré-carregada.
Vamos carregar nossa imagem da seguinte forma div elemento:
1 |
|
Em seguida, aplique o seguinte CSS ao div elemento. Como você pode ver, o URL da imagem de plano de fundo muda sempre que alguém passa o mouse sobre o div elemento.
1 |
div.hover-me { |
2 |
width: 640px; |
3 |
height: 360px; |
4 |
background: url("https://picsum.photos/id/128/1920/1080"); |
5 |
background-size: contain; |
6 |
cursor: pointer; |
7 |
margin: 0 auto; |
8 |
position: relative; |
9 |
}
|
10 |
|
11 |
div.hover-me::before { |
12 |
content: "Lake"; |
13 |
background: black; |
14 |
color: white; |
15 |
position: absolute; |
16 |
top: 0.75rem; |
17 |
left: 1rem; |
18 |
padding: 0.5rem; |
19 |
font-size: 1.5rem; |
20 |
border-radius: 5px; |
21 |
}
|
22 |
|
23 |
div.hover-me:hover { |
24 |
background: url("https://picsum.photos/id/296/1920/1080"); |
25 |
background-size: contain; |
26 |
}
|
27 |
|
28 |
div.hover-me:hover::before { |
29 |
content: "Mountains"; |
30 |
}
|
A imagem que aparece quando passamos o mouse sobre o div elemento é pré-carregado usando a marcação a seguir. Você deve idealmente colocar o link marca dentro do head tag da sua página da web.
1 |
|
A seguinte demonstração do CodePen mostra o pré-carregamento da imagem em ação:
Pré-carregando imagens usando CSS
Você deve ter notado na seção anterior que ambas as imagens que usamos foram aplicadas como um background para o div elemento. No entanto, apenas um deles foi baixado pelo navegador. A imagem que foi aplicada como background em foco foi baixado somente após o hover evento ocorreu.
Na seção anterior, forçamos o download da imagem flutuante com a ajuda do HTML. No entanto, também podemos enganar o navegador para baixar a imagem flutuante aplicando-a como imagem de fundo a algum outro elemento na página da web. Outra opção envolve definir o URL da imagem como um valor do content propriedade.
Eu prefiro usar o body elemento junto com o ::before ou ::after pseudo-elementos. Os URLs que desejo baixar serão definidos como um valor do content propriedade de qualquer um dos pseudo-elementos.
Uma coisa importante a ter em mente aqui é que precisamos empurrar os pseudo-elementos para longe da tela para evitar que seu conteúdo apareça acidentalmente na tela. O seguinte CSS cuida de tudo isso para nós:
1 |
body::before { |
2 |
content: url("https://picsum.photos/id/296/1920/1080"); |
3 |
position: absolute; |
4 |
top: -9999rem; |
5 |
left: -9999rem; |
6 |
opacity: 0; |
7 |
}
|
Eu também configurei o opacity para 0 como medida cautelar. Tenha em mente que você não deve definir o display propriedade para none para esconder o elemento. Nesse caso, é muito mais provável que o navegador não baixe a imagem.
Você pode ver que a imagem que precisamos ao passar o mouse está pré-carregada na seguinte demonstração do CodePen:
Pré-carregando imagens usando JavaScript
Também é possível pré-carregar imagens usando JavaScript. Este método oferece maior controle sobre a maneira como você pré-carrega as imagens. O pré-carregamento de imagens usando JavaScript também é mais conveniente em situações em que você precisa carregar um grande número de imagens. No entanto, só funcionará se a execução do JavaScript não estiver desativada no navegador.
A seguinte função pode nos ajudar a pré-carregar qualquer imagem em JavaScript.
1 |
function preload_image(im_url) { |
2 |
let img = new Image(); |
3 |
img.src = im_url; |
4 |
}
|
A função aceita o caminho para uma imagem que você deseja pré-carregar como parâmetro. Dentro da função, usamos o construtor de imagem para criar uma nova instância de HTMLImageElement. Depois de criar a instância do elemento de imagem, definimos o valor de seu src propriedade ao caminho da imagem que queremos pré-carregar.
Tudo o que é necessário agora é uma chamada para o preload_image() funcionar como mostrado abaixo:
1 |
preload_image("https://picsum.photos/id/296/1920/1080"); |
Você pode ver o pré-carregamento da imagem JavaScript em ação na seguinte demonstração do CodePen:
Pensamentos finais
Neste tutorial, aprendemos sobre três técnicas diferentes para pré-carregar imagens. Usando o link tag em HTML nos permite começar a carregar as imagens o mais cedo possível. Por outro lado, é muito mais conveniente usar JavaScript quando você deseja pré-carregar várias imagens. Você também pode controlar a ordem em que as imagens são pré-carregadas com JavaScript. Dessa forma, podemos garantir que o pré-carregamento da imagem não impeça o carregamento do conteúdo principal primeiro.
