check if dynamically added images is loaded

Question

I am creating simple html page where one image is dynamically added to div like below

$(".step3html").html('<img class="mobimg thumbnail" src="img/'+keys+'">');

I want to resize the container after image is loaded fully (it is absolute container) . So how to check if appended image is loaded and call some function where i will run resize function based on full container width.

I tried below code immediately after appending image,It doesn't seem to fire.

$(".mobimg").on('load', function() {
alert("das"); 
 });

Here is fiddle to test https://jsfiddle.net/whhjtwpp/2/

Look at my answer. The code must start from new element. – Alex Kudryashev May 26 '16 at 20:47 — Alex Kudryashev, May 26 '16 at 20:47

pparas · Accepted Answer · 2016-05-26T19:10:42.037

2

This code below works.

$(".step3html").html('<img class="mobimg thumbnail" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">');

$(".mobimg").on('load', function() {
  alert("das");
});

Try this fiddle.

https://jsfiddle.net/pparas/whhjtwpp/

You might have a different issue. Have you checked the value of keys in your console?

EDIT

Here is a working fiddle.

https://jsfiddle.net/pparas/whhjtwpp/4/

edited May 26 '16 at 19:10

answered May 26 '16 at 18:34

pparas

549
4
13

I use that with click of button , please check this its not working https://jsfiddle.net/whhjtwpp/1/ – Vishnu May 26 '16 at 18:40

score 1 · Answer 2 · answered May 26 '16 at 20:44

You should start from newly created element, img. This code works.

<button id="btn">button</button>
<div id="div"></div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#btn').click(function () {
            $('<img class="mobimg thumbnail" src="/images/hat22.jpg?a=' 
                + Math.random()/*ensure load from server*/ + '" />').load(function () {
                console.log('load');
                $('#div').empty().width($(this).prop('naturalWidth') + 10).append(this);
            });
        });
    });
</script>

score 0 · Answer 3 · answered May 26 '16 at 18:28

0

You could just write:

$('.mobimg').load(function(){
   //your code
});

The .load() is fired, when all elemnts and sub-elements are completely loadad.

answered May 26 '16 at 18:28

Otterbein

544
3
12

Ah, sry I didn't saw your edit. The .load() is a shortcut for the .on('load', handler) – Otterbein May 26 '16 at 18:29
yea its not working maybe because , image is added dynamically – Vishnu May 26 '16 at 18:30
One thing I have in mind is the cache! So maybe your image is already cached (e.g. if the source is set the image will begin to load). In this case you can try to replace the default .load() handler with your own with: .one("load", handler).each(function() { if(this.complete) $(this).load(); }); This provides the uniqueness of the .load()-handler – Otterbein May 26 '16 at 18:36
No . .even if I load new images its not firing – Vishnu May 26 '16 at 18:38

score 0 · Answer 4 · edited May 23 '17 at 11:52

0

As with all events, the image element must exist before you try to bind a load handler to it. That's why https://jsfiddle.net/pparas/whhjtwpp/ works but https://jsfiddle.net/whhjtwpp/2/ doesn't.
The load handler must be bound before the image loads.

The typical pattern is to create an image, bind the load handler, then set the src.

edited May 23 '17 at 11:52

Community

1
1

answered May 26 '16 at 19:35

sam

40,318
2
41
37

score -1 · Answer 5 · answered May 26 '16 at 18:38

Add an event listener, have the image announce itself with onload

<img class="mobimg thumbnail" onload='loadedImageFunction(this.id)' src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">

And then write javascript function

check if dynamically added images is loaded

5 Answers5