I have a lowres gif image which I want to show while the bigger one is still loading. Do any of you know how to show this lowres image while the larger one is still loading? Then once the larger image has been fully loaded, it immediately replaces the lowres one. Optional: If the larger image could fade-in using JQuery or Mootols or some other framework then that'd be great! I got my lowres gif from here www.ajaxload.info
That's pretty simple, you don't need AJAX and stuff.. Here's something I wrote in a minute: <script type='text/javascript'> function showBig() { document.getElementById('smallimg').parentNode.removeChild(document.getElementById('smallimg')); //remove the small image from the page document.getElementById('bigimg').style.display = 'block'; //and show the big image } </script> <img id='smallimg' src="small.jpg"> <img id='bigimg' src="big.jpg" style='display: none;' onload='showBig();'> Code (markup): Asuming you have a small.jpg and big.jpg files in the same directory as your html flie, this will load the small one when the page loads, and when the big one has finished loading, it will remove the small from the page and show the big one instead. You can still use a fader or something like that, if you want to make it more interesting
Asuming you have a small.jpg and big.jpg files in the same directory as your html flie, this will load the small one when the page loads, and when the big one has finished loading, it will remove the small from the page and show the big one instead. You can still use a fader or something like that, if you want to make it more interesting [/QUOTE] Wow! This is great! I'm such a noob. What fader do you suggest I use? Actually, where do you add the fader here? Hehe
you can use these script: Image Preloader MKII, Preload Image with progress bar and more similiar JavaScripts
Your reply was interesting but once I opened your links, the page was so messed up I can't find the links on the page to view the code.