For one of my recent freelance projects, I was tasked with creating an image gallery. I wanted the gallery to cycle continuously [i.e. - end to beginning when next is clicked, beginning to end when prev is clicked]; however, when the image was loading [i.e. - it is uncached], I wanted a ‘Loading …’ bar to display. I started to overthink the solution at first; however, the solution turned out to be rather easy. Please note, this solution has only been tested in FF3 and IE6.
function updateImage() {
document.location.hash = currentImage;
var image = document.getElementById(’galleryImage’);
image.src = documentRoot + galleryName + currentImage + imageSuffix;
// If the image has fully loaded, we are ready to display
// the image, and take away the loading bar.
image.onload = hideLoading;
}
/*********************************************************/
function showLoading() {
document.getElementById(’loadingBar’).style.display = ‘block’;
document.getElementById(’galleryImage’).style.display = ‘none’;
}
/*********************************************************/
function hideLoading() {
document.getElementById(’loadingBar’).style.display = ‘none’;
document.getElementById(’galleryImage’).style.display = ‘block’;
}
