global.user Posted October 10, 2008 Share Posted October 10, 2008 Hi !Just posting this to give you guys this link I just found.I was looking for just this, image preloading, and I made a search here at w3schools forum, and found nothing interesting (for me). All I found was JS code to preload images, but I didn't want to use JS, because many people disable it. The reason I wanted to have a preloader is the same as everybody: I've got plenty of images on my site, and I don't want people leaving because they're tired to wait...So this CSS method of preloading really helps me a lot. It also has the advantage of working in all browsers.For those who don't want to read the whole article, here is the code to do it:First, put something like this in the CSS stylesheet: <style type="text/css">.hidden { display:none;}</style> Then, put the elements (images) you want to preload at the END of the page where you want to preload them (still in the <body> tags); and use the "hidden" class: <html> <body> // your visible page <img src="image1.jpg" alt="" title="" height="350" width="350" class="hidden"> <img src="image2.jpg" alt="" title="" height="350" width="350" class="hidden"> <img src="image3.jpg" alt="" title="" height="350" width="350" class="hidden"> <body><html> That's it ! Pretty simple. But now, say you know all the images you want to preload, and you want them to be preloaded whatever the page you arrive on. Well, instead of repeating the same code over and over on each page, just use 1) a common stylesheet, and 2) a common php.Now, your stylesheet will look exactly as above, your external file (say, preloading.php) will look like: <img src="image1.jpg" alt="" title="" height="350" width="350" class="hidden"><img src="image2.jpg" alt="" title="" height="350" width="350" class="hidden"><img src="image3.jpg" alt="" title="" height="350" width="350" class="hidden"> and at the end of all pages, you only need to put a single line of PHP, like: <?php include("preloading.php"); ?> Way easier !Well, on those words, goodnight. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.