Javascript Image onLoad

sometimes when image is retrieved from browser cache, onload event would not be fired, thus you may do a little hack:

function FULL_IMAGE(fimage) {
    var loaded = false;
    function loadHandler() {
        if (loaded) {
            return;
        }
        loaded = true;
        /* your code */
    }
    var img = document.getElementById('FULL_SRC');
    img.addEventListener('load', loadHandler);
    img.src = fimage;
    img.style.display = 'block';
    if (img.complete) {
        loadHandler();
    }
}

In my original code I used onLoad not onload... the second line of code should read

document.getElementById("FULL_SRC").onload = function(){

with a lowercase "l" in onload.

The definition of the event is found inside of a function block. While I have not referenced the ECMAScript specification, I can only guess that the function keyword associates the function body code with the FULL_IMAGE symbol and does not actually enter/execute the code. Therefore, it becomes necessary for the function FULL_IMAGE to be called from the global block in order to register the event. Alternatively, the event registration code can be placed in the global block. This is all of course assuming that a FULL_SRC id has been given to an element on the given HTML document.

Given the comment, the following has been posted:

(Option 1)

  document.getElementById("FULL_SRC").onLoad = function(){
    offsetTop = document.getElementById("FULL_SRC").height / 2;
    offsetLeft = document.getElementById("FULL_SRC").width / 2;
    document.getElementById("FULL_SRC").style.marginTop="-"+offsetTop+"px";
    document.getElementById("FULL_SRC").style.marginLeft="-"+offsetLeft+"px";
  }

  function FULL_IMAGE(fimage){
    document.getElementById("FULL_SRC").src=fimage;
    document.getElementById("FULL_VIEW").style.display="block";
  }

(Option 2)

  function FULL_IMAGE(fimage){
    document.getElementById("FULL_SRC").onLoad = function(){
      offsetTop = document.getElementById("FULL_SRC").height / 2;
      offsetLeft = document.getElementById("FULL_SRC").width / 2;
      document.getElementById("FULL_SRC").style.marginTop="-"+offsetTop+"px";
      document.getElementById("FULL_SRC").style.marginLeft="-"+offsetLeft+"px";
    }
    document.getElementById("FULL_SRC").src=fimage;
    document.getElementById("FULL_VIEW").style.display="block";
  }

  FULL_IMAGE (myParameter);

Can't get my head around what you currently have, but such code works just fine:

var _images = ["image1.jpg", "image2.jpg", "image3.jpg"];
var _index = 0;

window.onload = function() {
    LoadImage();
};

function LoadImage() {
    //stop condition:
    if (_index >= _images.length)
        return false;

    var url = _images[_index];
    var img = new Image();
    img.src = url;
    img.onload = function() {
        _index++;
        LoadImage();
    };

    document.getElementById("Container").appendChild(img);
}

This will add the images to the container (element with ID Container) one by one, live test case: http://jsfiddle.net/yahavbr/vkQQ7/

This is plain JS, feel free to ask about any part for elaboration. :)