Um grande motivo para usar o pré-carregamento de imagem é se você deseja usar uma imagem para a imagem de fundo de um elemento em um evento mouseOver ou: hover. Se você aplicar essa imagem de fundo no CSS apenas para o estado: hover, essa imagem não será carregada até o primeiro evento: hover e, portanto, haverá um pequeno atraso irritante entre o mouse passar sobre aquela área e a imagem realmente aparecer .
Técnica # 1
Carregue a imagem no estado regular do elemento, apenas desloque-a com a posição de fundo. Em seguida, mova a posição do plano de fundo para exibi-lo ao pairar.
#grass ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background-position: bottom left; )Técnica # 2
Se o elemento em questão já tiver uma imagem de fundo aplicada e você precisar alterar essa imagem, o procedimento acima não funcionará. Normalmente, você escolheria um sprite aqui (uma imagem de fundo combinada) e apenas mudaria a posição do fundo. Mas se isso não for possível, tente fazer isso. Aplique a imagem de plano de fundo a outro elemento da página que já esteja em uso, mas não tenha uma imagem de plano de fundo.
#random-unsuspecting-element ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background: url(images/grass.png.webp) no-repeat; )A ideia de criar novos elementos de página para usar nessa técnica de pré-carregamento pode surgir em sua cabeça, como # preload-001, # preload-002, mas isso vai contra o espírito dos padrões da web. Daí o uso de elementos de página que já existem em sua página.
Tive a ideia de tentar usar o mesmo elemento, usar apenas a classe: after pseduo para carregar a imagem, então você não precisava depender da existência de imagens livres de fundo estranhas suficientes em sua página para trabalhar, mas por alguma razão não quis pré-carregá-los corretamente.
Mais
Confira este artigo para mais algumas técnicas, incluindo JavaScript.