I've trawled through all the posts on this, and I can't find a straight forward answer...<br />
<br />
I have a page which is made up of several GIFs which create an overall pattern - like most websites these days. But if they load one by one, it looks really crud, and ruins the final pleasing effect.<br />
<br />
So..I want to make all the images pre-load, and then all display at once in one fleeting orgy of visual pleasure.<br />
<br />
I tried to use a preload function like this....<br />
<br />
<br />
<br />
function loader(){<br />
<br />
imageA = new Image; imageA.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"etc.GIF";<br />
etc..<br />
<br />
}<br />
<br />
<br />
<BODY onload = "loader();"><br />
<br />
<br />
<br />
<br />
But that only seems to be useful if you are preloading images which will be used in rollovers etc...the images on the page still display as they load up one by one.<br />
<br />
The only code I saw in a post that tried to deal with this was HUGELY complex, about 100 lines of script, and seemed to include all kinds of arrays and for loops etc.<br />
<br />
IS IT REALLY THIS COMPLICATED?<br />
<br />
Can anyone tell me a simple, understandable way to achieve the effect of getting all images to display at the same time?<br />
<br />
Thanks for a) reading all this and b) replying...
<br />
<br />
Toby<!--content-->imageA = new Image; imageA.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"etc.GIF"; <br />
The code is correct ,I m guessing that it couldbe the way you have implemented the rest of code that.....<!--content-->Yes I know the code is correct..but that function only preloads images which are not already used on the page, so it doesn't do what I need it to do.<br />
<br />
Does anyone know how to preload images and not have them display until they are in cache?<!--content-->You could try this:function loader(){<br />
document.getElementById('image1').style.visibility = 'visible';<br />
document.getElementById('image2').style.visibility = 'visible';<br />
}<br />
<br />
<body onload="loader();"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"image1.gif" id="image1" style="visibility: hidden"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"image2.gif" id="image2" style="visibility: hidden">Adam<!--content-->
<br />
I have a page which is made up of several GIFs which create an overall pattern - like most websites these days. But if they load one by one, it looks really crud, and ruins the final pleasing effect.<br />
<br />
So..I want to make all the images pre-load, and then all display at once in one fleeting orgy of visual pleasure.<br />
<br />
I tried to use a preload function like this....<br />
<br />
<br />
<br />
function loader(){<br />
<br />
imageA = new Image; imageA.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"etc.GIF";<br />
etc..<br />
<br />
}<br />
<br />
<br />
<BODY onload = "loader();"><br />
<br />
<br />
<br />
<br />
But that only seems to be useful if you are preloading images which will be used in rollovers etc...the images on the page still display as they load up one by one.<br />
<br />
The only code I saw in a post that tried to deal with this was HUGELY complex, about 100 lines of script, and seemed to include all kinds of arrays and for loops etc.<br />
<br />
IS IT REALLY THIS COMPLICATED?<br />
<br />
Can anyone tell me a simple, understandable way to achieve the effect of getting all images to display at the same time?<br />
<br />
Thanks for a) reading all this and b) replying...
<br /><br />
Toby<!--content-->imageA = new Image; imageA.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"etc.GIF"; <br />
The code is correct ,I m guessing that it couldbe the way you have implemented the rest of code that.....<!--content-->Yes I know the code is correct..but that function only preloads images which are not already used on the page, so it doesn't do what I need it to do.<br />
<br />
Does anyone know how to preload images and not have them display until they are in cache?<!--content-->You could try this:function loader(){<br />
document.getElementById('image1').style.visibility = 'visible';<br />
document.getElementById('image2').style.visibility = 'visible';<br />
}<br />
<br />
<body onload="loader();"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"image1.gif" id="image1" style="visibility: hidden"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"image2.gif" id="image2" style="visibility: hidden">Adam<!--content-->