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 : 3197

HTML preloading
If your site contains images that are replace when a certain event is triggered, you know that preloading the images is extremely important, as otherwise the image may not show up on time to be seen.
To prevent that from happening, there are many ways of doing it, specially with preloading scripts, like those available at Dynamic Drive. But if you don't want to use those, for instance because you don't want to have a preloading page that will take even longer to load, you may use HTML to make that preloading.

This is actually quite simple, all you have to do is place the images you want to be preloaded somewhere in the page, with a width and a height of 1 pixel.

Obviously, if you just do that, you'll get a row of images somewhere in the page, that probably doesn't fit in with the design at all. To get around that situation, you have to use CSS, for absolute positioning, and place all the images with the said size over each other, so that you place all images in one pixel.

If you are confused (I would be!), here's what I'm talking about:

<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">

This will cause these images to be placed in the top left corner of your browser, all 3 on top of each other. You can place the images wherever you want, to do that, simply change the number that comes after "left" and "top" to the position where you want them to be.
One problem with this is that, unless you're extremely lucky, the place where you're placing those images has a different colour of the one that the last image will display. To solve this, simply create a 1 pixel sized image with the colour it should have (the bytesize of this image is naturally very reduced, around 50 bytes!), and then call that image in your HTML *AFTER* the other images, with the same positioning elements, so that it is placed over all the other images.

It is strongly advisable that you place those images in the HTML as high as possible, so that the browser "sees" them sooner and consequently starts loading them sooner. It is also important that you do not overuse this trick, specially with extremely heavy images, as your pages will take longer to load, so you'd better "waste" some time previously to try to decrease their bytesize to as few as possible!


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)