This site is under maintenance. Some links may stop working, I will try to fix them ASAP. Sorry!
See my DrawingsRead my MumblingsCheck my WallpapersView my web.designsTake a look at my GraphicsLearn with my Tutorials

Here is HomeNews in PortugueseVisit my Links

drawings : renewal


Lombergar.com
pixel.colos
deviantART
ghostbone
Vincent Low
niklasp.com
Alfdesign
Jams Arts
Joylee.net
phirebrush


Want to link us?

Tutorial type : HTML
Views : 3196

pre-carregamento (preloading) em HTML
Se tens um site com imagens que são substituidas quando um certo evento é activado, sabes que carregar previamente (preload) as imagens é muito importante, caso contrário, a imagem pode não aparecer a tempo de ser vista.
Para prevenir isto, há várias maneiras, especialmente com preloading scripts, como os disponíveis em Dynamic Drive. Mas se não quiseres usar um destes, por exemplo porque não queres ter uma página de preloading que vai atrasar ainda mais o carregamento, podes usar HTML para fazer esse preloading.

E isso é de facto muito simples, tudo o que tens de fazer é colocar as imagens que são para ser carregadas algures na página, com width e height igual a 1 pixel.

Obviamente, se só fizeres isto, ficas com uma linha de imagens algures que não se deve ajustar muito bem ao resto. Para dar a volta ao problema, tens de usar CSS, para posicionamento absoluto, e colocar todas as imagens com o tamanho referido umas em cima das outras, num só pixel.

Se estás confuso (eu estaria!), é disto que eu estou a falar:

<img src="image1.gif" style="position: absolute; left: 0px; top: 0px;" width="1" height="1" border="0">
<img src="image2.gif" style="position: absolute; left: 0px; top: 0px;" width="1" height="1" border="0">
<img src="image3.gif" style="position: absolute; left: 0px; top: 0px;" width="1" height="1" border="0">

Isto fará com que as imagens sejam colocadas no canto superior esquerdo do browser, as 3 umas em cima das outras. Podes colocar as imagens onde quiseres, para tal, basta mudares of número que vem a seguir a "left" e "top" para as coordenadas on queres que elas fiquem.
O problema disto é que, a menos que tenhas muita sorte, o pixel no qual as imagens ficam tem uma cor diferente daquela que a última imagem vai mostrar. Para resolver isto, basta criares uma imagem de 1 pixel com a cor que deveria aparecer (o tamanho em bytes dessa imagem é naturalmente muito pequeno, da ordem dos 50 bytes!), e depois chamar essa imagem no HTML *DEPOIS* das outras imagens, com os mesmos elementos de posicionamento, para que seja colocada em cima das outras imagens.

Aconselho-te vivamente a chamares as imagens no HTML o mais alto possível, para que o browser as "veja" mais cedo e consequentemente as comece a carregar quanto antes. É também importante que não utilizes isto em demasia, especialmente com imagens muito pesadas, pois a página demorará mais tempo a carregar, pelo que deves "perder" tempo antes para tentar diminuir o tamanho em bytes da imagem ao máximo!


5946 days online | hosted by TSOhost (recommended!)
copyright © 2002 - 2018  | Share the links, not the content

Aqui fica uma compilação de todos os MP3's encontrados desse grande sócio, o caríssimo . . . Zé Dread. Ze Dread - Compilacao.zip (mp3's - 11,35 MB) || Ze Dread - Compilacao.nfo (informações) Saca lá essa cena... Para quem usa eMule, aqui ficam os ed2k links: Ze Dread - Compilacao.zip || Ze Dread - Compilacao.nfo Aqui fica uma compilação de todos os MP3's encontrados desse grande sócio, o caríssimo . . . Zé Dread. Ze Dread - Compilacao.zip (mp3's - 11,35 MB)