Hi all,
How to show loading image when a big image is being loaded?
As an example in Orkut when viewing a photo in user photo album there is a loading image shown over the photo until the Photo is completely loaded.
I need to implement that feature.
My question is how implement that feature? Is it possible without using JQuery?
Please help.
Wrap your image in a div (or whatever you want) and set it's background image to be an animated gif or whatever loading image you want. When the image finishes loading it will cover up the background image. Easy and can be reused wherever you want.
<div class="loading">
<img src="bigimage.jpg" alt="test" />
</div>
CSS:
.loading{
background:transparent url(loadinggif.gif) center center no-repeat;
}
You could use the jQuery Lazy Loading plugin. It allows you to specify a loading image and delays the loading of large images until they are scrolled into view.
Edit: Apparently, this has been deprecated. Nothing to see here, move along.
No JavaScript or CSS is necessary for this. Just use the built-in, but seldom heard-of, lowsrc property for img elements.
<img src="giant-image.jpg" lowsrc="giant-image-lowsrc.gif">
The basic idea is that you create an additional very compressed, possibly black and white version of your normal image. It gets loaded first and when the full resolution image is downloaded, the browser replaces it automatically. The best part is you don't have to do anything.
Check it out here: http://www.htmlcodetutorial.com/images/_IMG_LOWSRC.html
Here's a basic technique that you can expand upon to do more elaborate stuff with
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
onload = function()
{
// Create an image object. This serves as a pre-loader
var newImg = new Image();
// When the image is given a new source, apply it to a DOM image
// after it has loaded
newImg.onload = function()
{
document.getElementById( 'test' ).src = newImg.src;
}
// Set the source to a really big image
newImg.src = "http://apod.nasa.gov/apod/image/0710/iapetus2_cassini_big.jpg";
}
</script>
</head>
<body>
<img id="test" src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" >
</body>
</html>
Time ago I made something like this for a similar problem:
<script>
function imageLoaded(img) {
document.getElementById('loadingImage').style.visibility='hidden';
img.style.visibility='visible';
}
</script>
...
<img id='loadingImage' src='loading.gif'/>
<img src='bigImage.jpg' style='visibility:hidden;' onload='javascript:imageLoaded(this);'/>
I think this approach has some useful advantages: