Pré-carregamento da imagem

Depois de muita festa, bebida a vontade, diversão. Volto à realidade, as vezes triste, como ainda estou em ritmo de festa, vou abordar um tema bem simples. Outro dia eu e o Leandro estávamos desenvolvendo um site, quando nos deparamos com uma situação simples, porém eu acho legal colocá-la aqui. Sem mais lenga, lenga, vou discorrer sobre o ocorrido, tínhamos um menu, de imagens, foi nesse momento que ocorreu o problema, pois na hora do efeito hover (mouse passar por cima), o html carregava a imagem na hora, o que demorava um tempo curto, mas necessário para aparecer, ou melhor, não aparecer nada. Fomos direto pro ajaxonline, onde tive uma idéia de como resolver, bem simples, era só colocar as imagens no css. se liga só:

na página html.

<div id=”home”></div>

isso é só para colocar a figura dentro.

no css:

#home{ background:url(../imagens/menu/home2.gif) ; }

O css carrega a imagem do efeito hover. Com isso, no momento em que você passar o mouse em cima, não vai ter mais o problema, pois o a imagem já foi carregada no css. Simples, porém genial.

Obs:

Isso pode ser usado em qualquer situação em que uma imagem está em “cima” da outra, nós usamos em um menu, mas isso abre um leque de opções, espero que você tenha gostado.

ps: eu parti do principio que você tenha noção de css, mas não se preocupe, que vou fazer alguns posts, abrangendo esse tema.

fuiiii…

2 respostas para Pré-carregamento da imagem

  1. Thiago Carvalho disse:

    Olá, surfando na net procurando algumas coisas no Oráculo Google, eu achei seu post sobre CSS e por tabela seu post sobre pré-carregamento de imagem. É bem esperto mesmo, chamar o a imagem no CSS para evitar que o rollover não funcione de primeira, mas eu achei que está mais pra um armengue inteligente, do que uma solução real. Acho que isso suje muito o código da página, por isso acredito que pré-carregar imagens via JavaScript é bem mais limpo e eficiente. É apenas uma idéia, mas a sua idéia é interessante até pra quem quer que o rollover funcione perfeitamente até em todos os browsers. Num browser com javaScript desativado a imagem não seria pré-carregada.

    valeu, até mais.

  2. ramon disse:

    Rapaz, nem lembrava mais desse post (rs), mas vamos lá.
    Na realidade, isso não suja o código da página, se for feito de maneira inteligente.
    Carregar por javascript é uma solução, porém se pode ser resolvido sem javascript, porque utilizá-lo? Existem alguns motivos, pra nesse caso não utilizar javascript, mas enfim a questão não é essa e por último, o exemplo que tinha dado acima, que faz mais de um ano (como o tempo passa rápido), já está ultrapassado, pois agora para esse tipo de situação usamos a técnica de sprite, pois só é necessário carregar uma imagem, conhece essa técnica?

    Obrigado, por demonstrar a sua opinião,
    volte sempre.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: