Hi all,
I am building a website for a small business which contains a number of images on several pages. I would like to preload all the images contained in the site but the scripts I have tried so far only work for the images on the page that the script is in.
Is there any way I can achieve this? If you want to check out the site the URL is http://www.simonlittle.co.uk
Any help much appreciated.
Ta
Paul
in the head tags somewhere place
<script language="JavaScript" type="text/JavaScript">
<!--
function Preload() {
var args = simplePreload.arguments;
document.imageArray = new Array(args.length);
for(var i=0; i<args.length; i++) {
document.imageArray[i] = new Image;
document.imageArray[i].src = args[i];
}
}
-->
</script>in the body tag place this as an atribute
onLoad="Preload('image1.jpg', 'image2.gif', 'image3.png', ...)"You can add as many images as you need, but I strongly recomend not to bother using an image preload script, it means that people with slow modems will have to wait for the images to download. If there are to many images people might think that the page isn't loading and will go back or even close the browser and will never return again.
Hi Ragnarok,
Thanks for the script. However this, like the others I have tried only preloads the images on the first page. I take your point about the length of time to preload but I don't think that will be too much of an issue here and I would rather see the images appear straight away as the various pages are browsed.
There are 25 images on the site, three on the first page (index.htm) and the others spread over three further pages. I have the script in the <head> tag on index.htm and the arguments in the <body> tag on index.htm but only the three images on index.htm preload.
Am I missing something here or is it simply that each page has to preload its own images?
Cheers
Paul
You cant preload for every script, you can only preload per page.
Hi Zachery,
Hmm I guessed that was the problem. As it happens the jpg files I have on the site are relatively small and load fairly quickly with a decent connection and with broadband there would be no problem at all.
Thing is I have a nine image "tour" where each picture is on a separate page and was looking for some way to ensure that these came up quickly when a visitor runs through them - obviously having a preload script on each page would be of no advatage whatsoever. Any ideas?
Cheers
Paul
No, sorry, i dont do a whole lot with this type of thing :\
I wish you like in finding a good solution
All an image preload does is open an image before the browser exicuted the pages, it does no more or less. The only way to do what you want it to do is for the browser to have a cache, this is not avalable in every browser and a lot of people have their cache's turned off.
You also have to remember that not eveyone will have a decent broughband connection and if you want to become and kind of a decent web-designer you have to cater for all your browser's needs wether it be small file sized images or adding a little extra code to made the layout work in every browser
I would like to preload all the images contained in the site but the scripts I have tried so far only work for the images on the page that the script is in.
I have used the following for the same problem you described...
in your <head> put:
<style type="text/css">
.hiddenPic {display:none;}
</style>
and before your ending </body>, after your actual HTML and so, you put:
<img src="http://www.yourweb.com/images/picture1.jpg" alt="picture1"
title="picture1" height="131" width="700" class="hiddenPic">
For every picture you want to be preloaded you create a new <img> tag with the hiddenpic class in it...
After doing this I copied the list of <img> tags to every page involved. When doing this be sure not to forget the <head> part !
Of course I do not know if this will work...I think/hope it does...:rolleyes:
I have used the following for the same problem you described...
in your <head> put:
<style type="text/css">
.hiddenPic {display:none;}
</style>and before your ending </body>, after your actual HTML and so, you put:
<img src="http://www.yourweb.com/images/picture1.jpg" alt="picture1"
title="picture1" height="131" width="700" class="hiddenPic">For every picture you want to be preloaded you create a new <img> tag with the hiddenpic class in it...
After doing this I copied the list of <img> tags to every page involved. When doing this be sure not to forget the <head> part !
Of course I do not know if this will work...I think/hope it does...:rolleyes:
hi!
i'm happy to have red your comments, because it works, under IE and Firefox.
i used JavaScript image preload, but your way works better!
thank you,
bye ;)
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.