JavaScript: Load an image from javascript then wait for the "load" event of that image

Question

I have a page that displays a picture in high quality. The pictures typically take a while to load. I have a jQuery function that runs on load of the picture #image I want this function to pre-load other images 1 at a time in the order they will appear.

So: on if I am on the 1st picture, it should load picture 1 and display it, then pre-load/cache the second picture when pic1 is done. The pictures being loaded all have a caching header attached already. When pic2 is done loading, pic3 should begin loading. In case you are wondering, I have a cgi backend that is able to print things in loops and such.

So far I have the following working:

$('#image').load(function() {
 preLoad2 = new Image()
 preLoad2.src = "pic2"
})

I can then continue this with another function with the same $('#image').load(function() { } line, but how do I make it so the next picture doesn't begin loading until this one is completely loaded. I would prefer not to use a timed delay as that is not very accurate.

Here is what I have currently. I am using a bash cgi script in this example.

#set a loop counter
# variables will be refered to as $[var-name]
count=1
first=true
#loop through all images that need pre-loading
for file in *
  do
    #check if the picture matches the search criteria
    if [[ "$file" = *$lowerSearch* ]]
      then
        #create a js script
        echo "<script language=\"javascript\" type=\"text/javascript\">"
        echo "function load$count() {"
        echo " preLoad$count = new Image()"
        echo " preLoad$count.src = \"?loadFile=$file\""
        echo "}"
        #the first one of these functions should be bound to the main image load event
        if [ "$first" = 'true' ]
          then
            echo "document.getElementById('image').onload = load$count()"
        #the 2nd and on should be bound to the pre-load of the previous picture
        else
          echo " preLoad$last.onload = load$count()"
        #end if
        fi
        echo "</script>"
        #store the current count so that the next time through it can be used to call the last loaded picture
        last=$count
        first=false
        #add 1 to count
        count=$((count+1))
    #end if
    fi
#end loop
done

How this works: Loops through pictures. If the picture matches the search criteria then run the main code...otherwise skip loop. In the search criteria, it creates a js script that includes a function. the function loads the picture that the loop is currently referring to. It then creates an onLoad function that refers to the last picture pre-loaded and sets an onLoad event to it that runs the function just created.

I believe this question's answer is somewhat related to this question

Answer 1

First create JSON record of images like this

var imageRecord = ['image1.jpg',
                'image2.jpg',
                'image3.jpg',
                'image4.jpg',
                'image5.jpg'];

then create function to load image one after another

function loadAllImages(index){
  if( index >= imageRecord.length ){
    return;
  }
  //create image object
  var image = new Image();

  //add image path
  image.src = imageRecord[index];

  //bind load event
  image.onload = function(){
    //now load next image
    loadAllImages(index + 1);
  }

}

hope this small snippet will help you.

to understand whole concept of preload images using javascript, please visit http://zainultutorials.blogspot.in/2013/11/preload-images-using-javascript.html