How to call a method when an image has been loaded and rendered after adding it to a HTML element?

Question

I need to call a method after an image has been loaded and fully rendered (appending it to the dom) in the browser.

In the following example window.onload fire only once, and now after pressing the button.

Any idea how to solve this/

    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <script>

    window.test = function (){
            var body = document.getElementsByTagName('body')[0];
            body.innerHTML += '<img id="c" src="http://upload.wikimedia.org/wikipedia/commons/3/3c/Ilc_9yr_moll4096.png" height="50" width="50"></img>'
        };

    window.onload = function() {
    alert("load an rendered main");
// call my method
    };

    $('img').load(function(){
        alert('loaded and redered');
    });



    </script>
    </head>
    <body>
    <img id="a" src="http://upload.wikimedia.org/wikipedia/commons/3/3f/Fronalpstock_big.jpg" height="50" width="50"></img>
    <img id="b" src="http://upload.wikimedia.org/wikipedia/commons/e/e3/Big-Bend-NP.jpg" height="50" width="50">
    </img>

    <button id="btn" onClick="window.test();"> click me</button>

    </body>
    </html>

http://stackoverflow.com/questions/910727/jquery-event-for-images-loaded — pee2pee, Oct 06 '14 at 11:40
@Gibbok ...Wanted to post answer but, it was too late, the post was already blocked. However, I improvised a Fiddle that I think might be useful should you still want more suggestions. Go to: http://jsfiddle.net/yaxvearm/ — ErickBest, Oct 06 '14 at 12:21

score 0 · Answer 1 · answered Oct 06 '14 at 11:46

Add onload function to img it will work everytime

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>

window.test = function (){
var body = document.getElementsByTagName('body')[0];
body.innerHTML += '<img onload="callMe()" id="c" src="http://upload.wikimedia.org/wikipedia/commons/3/3c/Ilc_9yr_moll4096.png" height="50" width="50">';
};

window.onload = function() {
    alert("load an rendered main");
};

$('img').load(function(){
    alert('loaded and redered');
});

function callMe() {
    alert("loaded");

}



</script>
</head>
<body>
<img id="a" src="http://upload.wikimedia.org/wikipedia/commons/3/3f/Fronalpstock_big.jpg" height="50" width="50"></img>
<img onload="callMe" id="b" src="http://upload.wikimedia.org/wikipedia/commons/e/e3/Big-Bend-NP.jpg" height="50" width="50">


<button id="btn" onClick="window.test();"> click me</button>

</body>
</html>

No it won't. The dynamically added image will not execute the function unless delegated from container — mplungjan, Oct 06 '14 at 11:47
sorry but does not work the dynamically added image does not execute — GibboK, Oct 06 '14 at 11:48

score 0 · Answer 2 · answered Oct 06 '14 at 12:01

The following code solved my problem.

Basically I had to adding event handlers after dynamically html was rendered.

http://jsbin.com/tazejuhefixa/1/

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>

var live = function(){

  $( "img" ).on( "load", function() {
    alert("load and rendered img XX");
});

};

var test = function (){
    console.log('x');
  var $body = $("body");
  $body.append('<img id="c" src="http://upload.wikimedia.org/wikipedia/commons/3/3c/Ilc_9yr_moll4096.png" height="50" width="50"/>');
  live();
  };

$(function() {
  // call my method
  $(document).on("load","img",function(){ // delegate
    alert("load main");
  });
});
</script>
</head>
<body>
<img id="a" src="http://upload.wikimedia.org/wikipedia/commons/3/3f/Fronalpstock_big.jpg" height="50" width="50"/>
<img id="b" src="http://upload.wikimedia.org/wikipedia/commons/e/e3/Big-Bend-NP.jpg" height="50" width="50"/>

<button id="btn" onClick="test();"> click me</button>

</body>
</html>

How to call a method when an image has been loaded and rendered after adding it to a HTML element?

2 Answers2

Linked