RLJ Posted May 6, 2011 Share Posted May 6, 2011 Hi all, I have an animated GIF banner on my website that is around 2MB. Currently, I use the following Javascript to preload the banner before the page is displayed: <!-- preload images banner = new Image(); banner.src = \"IMG/banner.gif\"; // End --> However, for people with slower internet connections, I want to write some Javascript that will achieve the following: - page loads up and displays with (small image size) loading.gif instead of banner.gif - banner.gif starts downloading "in the background" - when banner.gif has fully downloaded, loading.gif is replaced with banner.gif and banner.gif starts playing This seems easy, but I'm new to Javascript so I could use some help! Can somebody show me how to do this? Thanks! P.S. if you're thinking why do I need Javascript to do this, it's because if I just include banner.gif as an HTML image (and without the pre-loading Javascript above), it starts playing (and jittering) before it's fully loaded. But perhaps this also depends on the browser. Quote Link to comment Share on other sites More sharing options...
Adam Posted May 6, 2011 Share Posted May 6, 2011 You're forcing the user to download >2MB worth of data? Not such a problem on unlimited plans, but for those with limits (and especially for those with limits and slower connections) they certainly won't want that! Why does a banner even take 2MB? Quote Link to comment Share on other sites More sharing options...
RLJ Posted May 6, 2011 Author Share Posted May 6, 2011 I have tried the following: <html> <head> <script type="text/javascript" language="javascript"> var banner = new Image(); var loading = new Image(); var bannerElement = document.getElementById("BANNER"); banner.src = "IMG/BANNER1-2.gif"; loading.src = "IMG/loading.gif"; banner.onload = function() { bannerElement.removeChild(bannerElement.lastChild); bannerElement.appendChild(banner); }; bannerElement.removeChild(banner); bannerElement.appendChild(loading); </script> </head> <body> <div id="BANNER"> <img src="IMG/BANNER1-2.gif" alt="Banner" /> </div> </body> </html> But it's not working, can someone see where I've gone wrong? Thanks. Quote Link to comment Share on other sites More sharing options...
nogray Posted May 7, 2011 Share Posted May 7, 2011 Put your code in an onload function or in the bottom of the body (above the </body> tag). JavaScript in the head section loads before the body so the images are undefined. Quote Link to comment Share on other sites More sharing options...
RLJ Posted May 7, 2011 Author Share Posted May 7, 2011 A thanks, but I had already tried that as well, it doesn't seem to be working. What I have is the following: <html> <head> <script type="text/javascript" language="javascript"> function bannerload(){ var banner = new Image(); var loading = new Image(); var bannerElement = document.getElementById("BANNER"); banner.src = "IMG/BANNER1-2.gif"; loading.src = "IMG/loading.gif"; banner.onload = function() { bannerElement.removeChild(bannerElement.lastChild); bannerElement.appendChild(banner); }; bannerElement.removeChild(banner); bannerElement.appendChild(loading); } </script> </head> <body onload="bannerload()"> <div id="BANNER"> <img src="IMG/BANNER1-2.gif" alt="Banner" /> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
RLJ Posted May 7, 2011 Author Share Posted May 7, 2011 also if I comment out the banner.load function so that it should just change banner.gif for loading.gif, it doesn't seem to work Quote Link to comment Share on other sites More sharing options...
RLJ Posted May 12, 2011 Author Share Posted May 12, 2011 Any ideas anyone?! Thanks Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.