Forum Moderators: open
The hard way involves adding an "onload" handler on a dummy image variable in some code that's embedded in the page near the actual <img> tag. You initially display a low-res image that says "loading..." or whatever while the onload function waits for an image to be loaded. The tricky part is that images in Internet Explorer do not fire an onload event. You need to use a readyStateChange handler and a lot of event handling code for Internet Explorer (all stuff that I've never worked with so I can't advise you) and use onload for everyone else. I did a brief search last night on "img onload event" and found quite a few references. So with a bit of research, you should be able to find some examples that you can use as the basis for your own code.
1. Presumably the big image is your actual content. In general, it is not a good idea to make your content dependent on JavaScript or CSS being present. That is, a user that does not have JavaScript or CSS should still be able to see your content. So if you try to do something like put a small image in the page and then use JavaScript to load the real image and replace the small one, you're making your content inaccessible to some users.
2. If your image loads blurry and then clears up, it means your image is interlaced. Interlaced images allow the user to get an idea of what the image will look like before it has finished loading. Essentially, you're providing them with a glimpse of the content as it's loading. If you show a "loading" image instead, you are actually degrading the user experience because the user now has to wait for the entire image to load before getting any indication what that content will look like. What is the purpose of showing a "loading" image? Does it add any value, and if so, how?
3. The "easy" way that rainborick suggested (putting JavaScript in the <head> that loads a dummy img) has drawbacks as well. It will block other content from being loaded until the image has finished loading, which can give the appearance of an unresponsive website (a blank page).
An alternative might be to keep your html as it is. At the end of your HTML document (just before the closing </body> tag), include a script that creates the same dummy image and displays a "loading" overlay on top of the image (rather than hiding the image), and then hiding the "loading" image when it has loaded. Below is an example (note, I'm using the YAHOO UI Library's DOM Utility for working with the class). You would also need to define the CSS for two classes:
.loadingImage {
/* absolutely position the image on top of your big image */
}
.loadingComplete {
/* loading complete, so hide this */
display: none;
}
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
And include your own script that looks like this:
// Self executing anonymous function
(function () {
var bigImg = new Image(),
elImg = document.createElement('img');
elImg.src = 'loading.png';
// Attach the loading presentation
YAHOO.util.Dom.addClass(elImg, 'loadingImage');
document.appendChild(elImg);
bigImg.onload = function () {
// When this fires, hide the loading image
YAHOO.util.Dom.replaceClass(elImg, 'loadingImage', 'loadingComplete');
};
bigImg.src = 'bigimage.jpg';
})();
