Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript Image onLoad

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";
      }
like image 305
Shane Larson Avatar asked May 09 '11 06:05

Shane Larson


2 Answers

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();
    }
}
like image 121
otakustay Avatar answered Oct 16 '22 07:10

otakustay


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.

like image 21
Shane Larson Avatar answered Oct 16 '22 07:10

Shane Larson