I'm trying to load a temporary image tag. Once that tag is done loading the image, I will set the 'src' for the img#main to the 'src' of the "temporary" image element. The thing is, the temporary image is successfully loading (it shows up on the screen), but the onload handler doesn't seem to fire. I never get my "Image is done loading" msg. I don't see how the temporary image can show up on the page, but not trigger its onload handler (would this happen if the browser is using a cached version of the image? But, I'm pretty sure I cleared the cache, anyway.). By the way, I've also tried code like B) below. But that didn't seem to work either. Also, I'm using Aptana Studio and loading my pages into my local WAMP server. I don't know if that makes any difference. Also, the urls that I'm assigning to the 'src' are document relative (like: "images/image_1.jpg").

I would appreciate any advice anyone might have. Thanks very much. Mike H.

A)

$('img#temp').load = function(){
  mch.say('Image is done loading');
}
$('img#temp').attr('src', url);
$('img#main').attr('src', url);

B)

var tempImage = new Image();
tempImage.src = url;
tempImage.onload = function(e){
mch.say("Image is done loading");
}

I'm trying to load a temporary image tag. Once that tag is done loading the image, I will set the 'src' for the img#main to the 'src' of the "temporary" image element. The thing is, the temporary image is successfully loading (it shows up on the screen), but the onload handler doesn't seem to fire. I never get my "Image is done loading" msg. I don't see how the temporary image can show up on the page, but not trigger its onload handler (would this happen if the browser is using a cached version of the image? But, I'm pretty sure I cleared the cache, anyway.). By the way, I've also tried code like B) below. But that didn't seem to work either. Also, I'm using Aptana Studio and loading my pages into my local WAMP server. I don't know if that makes any difference. Also, the urls that I'm assigning to the 'src' are document relative (like: "images/image_1.jpg").

I would appreciate any advice anyone might have. Thanks very much. Mike H.

A)

$('img#temp').load = function(){
  mch.say('Image is done loading');
}
$('img#temp').attr('src', url);
$('img#main').attr('src', url);

B)

var tempImage = new Image();
tempImage.src = url;
tempImage.onload = function(e){
mch.say("Image is done loading");
}

• javascript
• image
• onload-event

• Can you put a bigger part of your code? I don't know what mch is. And I'd like to see the HTML part too. – Zaenille Commented May 30, 2014 at 4:28
• Sorry for my belated reply. I've been away from my puter. mch.say() is just a method that created to output stuff to my browser window. As for my code snippet, I'll try to get something more coherent up soon. – user3538389 Commented May 31, 2014 at 3:34

1 Answer 1

There are two errors in A & B.

A) $('img#temp').load should be $('#temp').on('load') (if you're using jquery)

B) You should assign the onload event before assining the src.