LifeInBinary Posted March 7, 2007 Share Posted March 7, 2007 I know I can Google for this, but can someone show me some actual code that I could preload images on my site with? Assume the images are named image1.jpg, image2.jpg, image3.jpg, etc... Also, would JavaScript be better to do this with?Secondly, is there a way that I could put the code to preload the images in my external CSS file under the class of body.preload and just put this in my body tag: <body class="preload">Let me put this out there too: the reason I want to do this is to get my loading time down... I have 392kb of images to load, and that would be crazy on dial-up. I have compressed the images to 76kb, but it still takes 8 seconds to load on dial-up. So I kind of want to preload them and display a separate HTML page while they preload - how would I do this?Also, any other suggestions to improve loading time would be very helpful...Thanks,LifeInBinary. Link to comment Share on other sites More sharing options...
ste Posted March 7, 2007 Share Posted March 7, 2007 <html><head><script language="javascript" type="text/javascript">function showpage() {document.getElementById('loader').style.display = "none";document.getElementById('main').style.display = "block";}</script></head><body onload="showpage();"><div style="height:100%; width:100%; display:block;" id="loader">Some preloading content here</div><div style="height:100%; width:100%; display:none;" id="main">Main Content Here</div></body></html> Link to comment Share on other sites More sharing options...
jesh Posted March 7, 2007 Share Posted March 7, 2007 Preloading images in javascript is pretty straight forward: <html><head><style type="text/css">#content { display: none; }</style><script type="text/javascript">funciton showImages(){ document.getElementById("content").style.display = "block"; document.getElementById("screen").style.display = "none";}window.onload = showImages;</script></head><body><div id="content"> <img src="/images/image1.jpg" /> <img src="/images/image2.jpg" /> <img src="/images/image3.jpg" /> <img src="/images/image4.jpg" /></div><div id="screen"> Please wait while the page loads...</div></body></html> Rather than hiding the screen and showing the content, you could redirect the user to a different page if you wanted: funciton showImages(){ location.href = "/page2.html";} EDIT: I must be a slower typer than ste! Link to comment Share on other sites More sharing options...
LifeInBinary Posted March 8, 2007 Author Share Posted March 8, 2007 So could I set up an external .js file to preload the images? Would it look like this: var image1 = new Image();image1.src = "/images/image1.jpg";var image2 = new Image();image2.src = "/images/image2.jpg";var image3 = new Image();image3.src = "/images/image3.jpg";var image4 = new Image();image4.src = "/images/image4.jpg";var image5 = new Image();image5.src = "/images/image5.jpg"; Sorry, I don't know JavaScript yet - so if that's wrong, can someone edit it to be right and post it for me please?Also, I know i would call that .js file from the .html page that I am preloading - and I know how to do that.So could I call a second .js file that shows the preloading screen? Would it only contain this: funciton showImages(){ location.href = "/page2.html";} Would I then just add this to my HTML page: <body onload="showpage();">Could someone show me specifically (or explain in detail) how to set up my .html file, the .js file that actually preloads, and the .js file that shows the preloading screen?Also, how long does the preloading screen display - and can I change that? I would like to put a .gif animation of a loading bar on the preloading page and have it redirect to the actual page after the .gif animation finishes...Thanks for the help,LifeInBinary. Link to comment Share on other sites More sharing options...
jesh Posted March 8, 2007 Share Posted March 8, 2007 You could use one js file:showimages.js var image1 = new Image();image1.src = "/images/image1.jpg";var image2 = new Image();image2.src = "/images/image2.jpg";var image3 = new Image();image3.src = "/images/image3.jpg";var image4 = new Image();image4.src = "/images/image4.jpg";var image5 = new Image();image5.src = "/images/image5.jpg";funciton showImages(){ location.href = "/page2.html";} Then, in your HTML: <html><head><script type="text/javascript" src="showimages.js"></script></head><body onload="showImages();"><div>Please wait while the images load.</div></body></html> As for how long it would take, that totally depends on the user's connection. Someone with dialup will take longer than someone with broadband. Link to comment Share on other sites More sharing options...
LifeInBinary Posted March 8, 2007 Author Share Posted March 8, 2007 You could use one js file:showimages.jsvar image1 = new Image();image1.src = "/images/image1.jpg";var image2 = new Image();image2.src = "/images/image2.jpg";var image3 = new Image();image3.src = "/images/image3.jpg";var image4 = new Image();image4.src = "/images/image4.jpg";var image5 = new Image();image5.src = "/images/image5.jpg";[color="#FF0000"]function showImages(){ location.href = "/page2.html";}[/color] Then, in your HTML: <html><head><script type="text/javascript" src="showimages.js"></script></head><body onload="showImages();">[color="#0000FF"]<div>Please wait while the images load.</div>[/color]</body></html> As for how long it would take, that totally depends on the user's connection. Someone with dialup will take longer than someone with broadband. Thank you so much for that - but just out of curiosity: Why do I need to put a loading message in a div (blue), if I'm bringing up a different .html file (red)?Thanks for the help,LifeInBinary. Link to comment Share on other sites More sharing options...
jesh Posted March 8, 2007 Share Posted March 8, 2007 Well, if the browser waits for all those images to download before redirecting the user to the second page, then that div gives the user something to look at while they wait. Link to comment Share on other sites More sharing options...
LifeInBinary Posted March 8, 2007 Author Share Posted March 8, 2007 Well, if the browser waits for all those images to download before redirecting the user to the second page, then that div gives the user something to look at while they wait.Ah, so really if I have that div - then I can just not redirect them because it would be kind of pointless right? So I could just put my loading page content in the div - and once the images preload in their browser, then it will automatically show the original page?Thanks,LifeInBinary. Link to comment Share on other sites More sharing options...
jesh Posted March 8, 2007 Share Posted March 8, 2007 Ah, so really if I have that div - then I can just not redirect them because it would be kind of pointless right? So I could just put my loading page content in the div - and once the images preload in their browser, then it will automatically show the original page?Thanks,LifeInBinary.Well, I think two ways have been discussed in this thread:1) Pre-load all the images on your site on the first page a visitor comes to when they first hit your site (e.g. index.html). Then, once the page has loaded, all of the images that a visitor might see would then be on that visitor's cache. Once this happens you can redirect the user to the real first page of your site (e.g. page1.html). The next time the visitor comes to your site, they'll hit the index.html page and almost immediately be sent to page1.html because the images will have loaded from cache. This is how the example in my previous post works.2) Pre-load all the images on the page. Once all the images have loaded, hide the "This page is loading" div and show the main content div. That'd look more like this:<html><head><style type="text/css">#Content { display: none; }</style><script type="text/javascript">function showImages(){ document.getElementById("Loading").style.display = "none"; document.getElementById("Content").style.display = "block";}</script></head><body onload="showImages();"><div id="Loading">Please wait while this page loads...<img src="someanimatinggif.gif" /></div><div id="Content"> <img src="images/image1.jpg"> <img src="images/image2.jpg"> <img src="images/image3.jpg"> <img src="images/image4.jpg"></div></body></html> Link to comment Share on other sites More sharing options...
pulpfiction Posted March 8, 2007 Share Posted March 8, 2007 If you are looking for some interactive page load effect, this is simple.... <script type="text/javascript">var size=10;var Interval = 200;var i=1;function Msg_Wait(){obj = document.getElementById('div_wait')if (obj){if (i>size){// reseti=1;obj.innerHTML = "";}obj.innerHTML += "<font face=arial color=red size=3>[]</font>";i++;setTimeout(Msg_Wait, Interval);}return;}</script> HTML <body onload="java script:Msg_Wait();"> <div id="div_wait"></div></body> 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