Javascript Image onLoad

Question

Why does the onLoad not get triggered?

      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";
      }

Answer 1

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();
    }
}

Answer 2

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);

Answer 3

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.