hoisting - Javascript function called too soon -

this question has answer here:

• how image size (height & width) using javascript? 23 answers

i'm having problem javascript function apparently gets called soon. have hunch hoisting problem, i'm not sure.

so, have function assigned onclick of <img>:

function setmodalpicture(picname){            //build path picture      var pic= 'assets/img/art/'+picname;              //set picture      $('#g-modal-img').attr('src', pic);                adjustmodalpadding();                  }

the intention src attribute of #g-modal-img should set img, , should adjustmodalpadding called. because adjustmodalpadding needs height of #g-modal-img, 0 before src set <img>. however, noticed doesn't work properly, , if make adjustmodalpadding log height of #g-modal-img console, shows zero. think means function called before src set <img>.

you need wait image load:

function setmodalpicture(picname){      //build path picture     var pic= 'assets/img/art/'+picname;      //set picture     var img = $('#g-modal-img');     img.one("load", adjustmodalpadding).attr('src', pic);     if (img[0].complete) {         img.off("load", adjustmodalpadding);         adjustmodalpadding();               } } 

note sequence above, because it's important:

1. first, hook load event one-off handler (one).
2. then, set src.
3. check if image complete: if so, remove handler , call function immediately; otherwise, when load fires, call adjustmodalpadding , remove handler.

you may want add error handling that...

---

here's working example:

function setmodalpicture(picname) {      //build path picture    var pic = picname; // 'assets/img/art/'+picname;      //set picture    var img = $('#g-modal-img');    img.one("load", adjustmodalpadding).attr('src', pic);    console.log("img[0].complete after setting src: " + img[0].complete);    if (img[0].complete) {      img.off("load", adjustmodalpadding);      adjustmodalpadding();    }  }    function adjustmodalpadding() {    var img = $("#g-modal-img")[0];    console.log("size: " + img.width + "x" + img.height);  }  $("input[type=button]").on("click", function() {    console.log("img[0].complete before starting: " + $("#g-modal-img")[0].complete);    setmodalpicture("https://graph.facebook.com/1035045703246692/picture?type=large");  });

<!-- in comment, said starts out src="" -->  <img id="g-modal-img" src="">  <input type="button" value="click me">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

that works me in chrome, firefox, , ie11.

---

alternately, might create replacement img element cloning:

function setmodalpicture(picname) {      //build path picture    var pic = picname; // 'assets/img/art/'+picname;      //set picture    var img = $("#g-modal-img");    var newimage = img.clone();    img.replacewith(newimage);    newimage.one("load", adjustmodalpadding).attr('src', pic);    console.log("newimage[0].complete after setting src: " + newimage[0].complete);    if (newimage[0].complete) {      newimage.off("load", adjustmodalpadding);      adjustmodalpadding();    }  }    function adjustmodalpadding() {    var img = $("#g-modal-img")[0];    console.log("size: " + img.width + "x" + img.height);  }  $("input[type=button]").on("click", function() {    console.log("img[0].complete before starting: " + $("#g-modal-img")[0].complete);    setmodalpicture("https://graph.facebook.com/1035045703246692/picture?type=large");  });

<!-- in comment, said starts out src="" -->  <img id="g-modal-img" src="">  <input type="button" value="click me">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

that works me in chrome, firefox, , ie11.

---

finally, might create replacement img element scratch (not cloning):

function setmodalpicture(picname) {      //build path picture    var pic = picname; // 'assets/img/art/'+picname;      //set picture    var img = $("#g-modal-img");    var newimage = $("<img>").attr("id", "g-modal-img");    img.replacewith(newimage);    newimage.one("load", adjustmodalpadding).attr('src', pic);    console.log("newimage[0].complete after setting src: " + newimage[0].complete);    if (newimage[0].complete) {      newimage.off("load", adjustmodalpadding);      adjustmodalpadding();    }  }    function adjustmodalpadding() {    var img = $("#g-modal-img")[0];    console.log("size: " + img.width + "x" + img.height);  }  $("input[type=button]").on("click", function() {    console.log("img[0].complete before starting: " + $("#g-modal-img")[0].complete);    setmodalpicture("https://graph.facebook.com/1035045703246692/picture?type=large");  });

<!-- in comment, said starts out src="" -->  <img id="g-modal-img" src="">  <input type="button" value="click me">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>