Guest Wim van Heugten Posted February 15, 2007 Share Posted February 15, 2007 Is it possible to preload a site with al its images?I've made an html site with different Iframes and I want to preload te site so you don't see the site building up... how can I do this? anyone?I've found some js tutorials but then I have to point the script to every single image and there are a lot of images in the site Many thanks in advance Link to comment Share on other sites More sharing options...
MrAdam Posted February 15, 2007 Share Posted February 15, 2007 couldn't you use the "images[]" array ? Link to comment Share on other sites More sharing options...
LifeInBinary Posted February 16, 2007 Share Posted February 16, 2007 Could you please elaborate mrAdam? I am experiencing the same problem. It seems like preloading just a couple of images with JavaScript does fine, but when I have to do 50 or so I start having some problems - it just seems like it doesn't work for some reason. Is there a better way to do this, or could someone post a nice example of code that would preload say 20 images so that we get an idea of how to do it ourselves?Thanks for all the help guys,LifeInBinary. Link to comment Share on other sites More sharing options...
reportingsjr Posted February 16, 2007 Share Posted February 16, 2007 You could just put a div at the top that has a width of 100% and height of 100%. Set the z-index as 100 (dont forget to put position:absolute;). Those 4 things in css. Put inside the div text such as "Please wait, site loading.....". Put an id on the div and use this javascript code: function HideDiv(){ document.getElementById('divname').style.display = 'none';}window.onload = HideDiv(); That should do it! Link to comment Share on other sites More sharing options...
LifeInBinary Posted February 16, 2007 Share Posted February 16, 2007 You could just put a div at the top that has a width of 100% and height of 100%. Set the z-index as 100 (dont forget to put position:absolute;). Those 4 things in css. Put inside the div text such as "Please wait, site loading.....". Put an id on the div and use this javascript code:Could you please post an example of that div code to put at the top, and where to put the names of your image files to preload?Thanks a lot for your help,LifeInBinary. Link to comment Share on other sites More sharing options...
jesh Posted February 16, 2007 Share Posted February 16, 2007 An example (slightly modified...) of reportingsjr's method could look like this: <html><head><style type="text/css">#Content { display: none; }</style><script type="text/javascript">function LoadComplete(){ // hide the loading panel. document.getElementById("Loading").style.display = "none"; // show the content panel. document.getElementById("Content").style.display = "block";}// run the function as soon as the window is finished loading.window.onload = LoadComplete;</script></head><body><div id="Loading">Please wait while the site loads...</div><div id="Content"><!-- Your page goes here...--> <img src="image1.jpg" /> <img src="image2.jpg" /> <img src="image3.jpg" /> <img src="image4.jpg" /> <img src="image5.jpg" /> <img src="image6.jpg" /> <img src="image7.jpg" /> <img src="image8.jpg" /></div></body></html> Link to comment Share on other sites More sharing options...
LifeInBinary Posted February 16, 2007 Share Posted February 16, 2007 Thank you very much jesh - that was exactly what I wanted :)LifeInBinary. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now