Why doesn't this onload function run?

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

btw, i found the problem... its onload not onLoad... I figured the L would be capital. lol — Shane Larson, May 09 '11 at 06:37
`var image = document.getElementById('FULL_SRC');` ... variables make your code better and life easier :) — Cobby, Jan 23 '13 at 01:51

score 39 · Answer 1 · edited Oct 17 '17 at 20:31

39

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

edited Oct 17 '17 at 20:31

Chris

6,805
3
35
50

answered May 09 '11 at 06:27

otakustay

11,817
4
39
43

10

Don't assign loadHandler directly to `img.onLoad`, this will blow away any other `onLoad` handlers you have assigned to the image. Instead use `img.attachEventListener('load', loadHandler);`. – dclowd9901 Oct 01 '13 at 19:30
8

@dclowd9901 did you mean img.addEventListener('load', loadHandler);? :) – Leonard Pauli Mar 30 '14 at 13:00
You might want to stress that the `img.complete` checks if an image has been received / downloaded. Placing it directly after your code like that means that it was already received / downloaded, but this does not have to be the case. AFAIK, the `complete` attribute can also mean an image was set. Or failed downloading, or not. There's no solid rule about it, so it's horrible in terms of cross-browser implementation. See https://stackoverflow.com/questions/12685844/html-img-attribute-complete for extra reference – Biepbot Von Stirling Dec 22 '17 at 17:22
@BiepbotVonStirling The `img.complete` check is specially for IE6 in which if an image is cached via HTTP headers, it will never trigger `load` event but has its `complete` property set to `true` synchronously, yes it's a bug of IE6 – otakustay Dec 26 '17 at 11:49
@otakustay It'd be best to add a browser check then so you don't accidentally break browsers with different implementations for `img.complete`. Alternatively, add an implementation for the `onload` event for IE6 (much like a polyfill) to prevent coding around bugs – Biepbot Von Stirling Dec 27 '17 at 12:51

score 9 · Answer 2 · edited May 09 '11 at 22:11

9

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.

edited May 09 '11 at 22:11

Jonas Heidelberg

4,984
1
27
41

answered May 09 '11 at 18:55

Shane Larson

597
2
7
21

sosc · Answer 3 · 2011-05-09T06:39:45.613

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

Why doesn't this onload function run?

3 Answers3

Linked