Question

I have a function that gets called from an onclick event
for example

<a href="#" onclick="changeImages()">load new</a> 

This function basically changes 5 images that are layered on top of each other:

    function changeImages(){
    document.getElementById("ins5").src="image5.png";
    document.getElementById("ins4").src="image4.png";
    document.getElementById("ins3").src="image3.png";
    document.getElementById("ins2").src="image2.png";
    document.getElementById("ins1").src="image1.png";       
}

What i would like is to display a LOADING animated gif while they all load. Once they have all finished loading then Fade them in. I have searched everywhere and cant find anything that works.

Many Thanks!

Answer 1

use jQuery. You can attach the .load parameter as a callback function.

function changeImages(){
  $("#ins5").prop('src','image5.png');
  $("#ins4").prop('src','image4.png');
  $("#ins3").prop('src','image3.png');
  $("#ins2").prop('src','image2.png');
  $("#ins1").prop('src','image1.png');
  $("#ins5, #ins4, #ins3, #ins2, #ins1").load(function(){
    //This is ourcallback. Once our images have loaded, we display an alert
    alert("loaded!");
  });
}