Trouble using onLoad with .each()

Question

Seems like the click function isn't being binded at all, anyone know why?

 <img src='img.jpg'/>

 $("img").each(function(){
   var src = $(this).attr('src');
   var img = new Image();
   img.src = src;
   img.onLoad = function(){
     $(this).click(function(){ alert( 'loaded' }); // < not binding
   } 
 });

Don't know what else to try.

you need to set the onload event before setting the src, and its `onload` not `onLoad` — Patrick Evans, Jul 03 '14 at 18:02
@ZeeTee should be after but why would you need to bind click event once image loaded? — A. Wolff, Jul 03 '14 at 18:03
@PatrickEvans No, you can set `onload` after. JavaScript is single-threaded. The image won't be loaded until the thread of execution returns to the browser. The actual error is `onLoad` instead of `onload`. — user229044, Jul 03 '14 at 18:04
@PatrickEvans Yes, I'm telling you you're wrong. It's fine the way it is. — user229044, Jul 03 '14 at 18:05
@meagar, ah i see what you meant, but won't the onload event not get called if the image is cached? — Patrick Evans, Jul 03 '14 at 18:09
No, caching isn't going to affect `onload` callbacks. `onload` has nothing to do with the network or where the image is coming from. — user229044, Jul 03 '14 at 18:11
@meagar - actually, in older IE the onload callback is not called on cached images. — adeneo, Jul 03 '14 at 18:11
@adeneo Eh, I'll take your word for it. I haven't had to professionally support IE earlier than 10 for years. — user229044, Jul 03 '14 at 18:15

score 3 · Accepted Answer · edited Jul 03 '14 at 18:20

3

JavaScript is case-sensitive.

It's onload, not onLoad.

The second problem is that you're binding the click handler to the newly created var img, which is never added to the DOM. You're binding it to the img = new Image(), not the <img> tag you have at the top.

Ignore this and try the following:

 $("img").each(function(i, el){
   var $el = $(el);
   var src = $el.attr('src');
   var img = new Image();
   img.src = src;

   img.onload = function(){
     $el.click(function(){ alert( 'loaded' }); // < not binding
   } 
 });

edited Jul 03 '14 at 18:20

PeterKA

24,158
5
26
48

answered Jul 03 '14 at 18:03

user229044

232,980
40
330
338

@ZeeTee explain then what do you mean by 'not completly'? – A. Wolff Jul 03 '14 at 18:05
The click event still not binding, the onload() event not firing within the each statement – Control Freak Jul 03 '14 at 18:06
So you're saying the $(this) is binded to the onload statement instead of the object in the each statement? – Control Freak Jul 03 '14 at 18:08
`this`, inside the `onload`, is `img`, as in the variable `var img =new Image()`. It's no longer the element on the page. – user229044 Jul 03 '14 at 18:10
yup worked, thanks. didnt think it would do that in an onload event – Control Freak Jul 03 '14 at 18:11

adeneo · Answer 2 · 2014-07-03T18:14:47.030

2

events are lowercase
this inside the onload function is not the image in the DOM
you should always set the source after the onload handler is bound
you seem to be missing a closing parenthesis in the alert()

.

$("img").each(function(index, element){
   var img = new Image();

   img.onload = function(){
     $(element).on('click', function(){ 
           alert( 'loaded');
     });
   } 

   img.src = this.src;

   if (img.complete) img.onload();

});

edited Jul 03 '14 at 18:14

answered Jul 03 '14 at 18:08

adeneo

312,895
29
395
388

#3 is wrong; you do not need to set the `onload` before the `src`. – user229044 Jul 03 '14 at 18:19
It's a bit old, but here's a [SO question](http://stackoverflow.com/questions/1038327/image-onload-not-firing-twice-in-ie7) about this. There have been issues with setting the source before the onload handler, so it's common to make sure you set the source after the onload handler, as that at least makes sure there are no issues with it, and it's such an easy fix. – adeneo Jul 03 '14 at 18:47
That question is from 2009, and is about a dead browser. There's very little value in perpetuating hacky fixes for dead browsers. – user229044 Jul 03 '14 at 18:56

PeterKA · Answer 3 · 2014-07-03T18:14:34.523

0

Since you're already using jQuery, you can use it as follows:

 var that = $(this);
 $(img).load(function(){
      that.click(function(){ alert( 'loaded' }); 
 });

Once the image is loaded, the click event will be bound to the image.

edited Jul 03 '14 at 18:14

answered Jul 03 '14 at 18:08

PeterKA

24,158
5
26
48

Trouble using onLoad with .each()

3 Answers3