Topic awaiting preservation: image onload $Pages that link to <a href="https://ozoneasylum.com/backlink?for=8226" title="Pages that link to Topic awaiting preservation: image onload" rel="nofollow" >Topic awaiting preservation: image onload\$

Author	Thread
maninacan Paranoid (IV) Inmate From: Seattle, WA, USA Insane since: Oct 2001	posted 07-02-2002 01:27 how do I access, and change the onload event of an image? Maninacan Cell #471 kewl Mad Scientists
Slime Lunatic (VI) Mad Scientist From: Massachusetts, USA Insane since: Mar 2000	posted 07-02-2002 02:55 Well, this might work: <img src="..." id="importantimage"> ... function somefunc() {dosomething();} document.getElementById("importantimage").onload = somefunc;
maninacan Paranoid (IV) Inmate From: Seattle, WA, USA Insane since: Oct 2001	posted 07-02-2002 03:21 that's what I tried, but it didn't work Maninacan Cell #471 kewl Mad Scientists
Slime Lunatic (VI) Mad Scientist From: Massachusetts, USA Insane since: Mar 2000	posted 07-02-2002 03:25 Yeah, I was thinking it might not. Apparently there's a distinction between the <img> HTML Element and the actual image object that it displays. I wonder if there's any way to access that image that it contains. One sec.
Slime Lunatic (VI) Mad Scientist From: Massachusetts, USA Insane since: Mar 2000	posted 07-02-2002 03:32 Hmm, let me see the code you're using. Are you putting the script that assigns the onload function after the image tag?
maninacan Paranoid (IV) Inmate From: Seattle, WA, USA Insane since: Oct 2001	posted 07-02-2002 04:40 yes, I want to change the onLoad event after the image has loaded. Sort of hard to explain. But I want to change the onLoad event after the image has initially loaded because the src of the image will change dynamically. Maninacan Cell #471 kewl Mad Scientists
Slime Lunatic (VI) Mad Scientist From: Massachusetts, USA Insane since: Mar 2000	posted 07-02-2002 04:58 Hmm, that's interesting. I've never tried that. Are you sure this isn't a case where it would be easier to just preload the images with the JavaScript Image object?
maninacan Paranoid (IV) Inmate From: Seattle, WA, USA Insane since: Oct 2001	posted 07-02-2002 06:14 well, I'm gonna do that if I can't find the answer to this but it's gonna be dynamically changed about 20 or so times, so I'd rather not have such long loading time up front. Maninacan Cell #471 kewl Mad Scientists
Nevel Bipolar (III) Inmate From: Amsterdam Insane since: Jun 2002	posted 07-02-2002 13:34 Ok, hang on, cause this is weird stuff indeed.. The problem is not that you aren't able to change the onload-event(http://www.brainjar.com/dhtml/events/), the problem is onLoad doesn't get called after the first src-value had been loaded. When you call onLoad explicitly, it does precisely as it's told. I can't think of a simple solution, don't even know if this is a bug or just the way html handles these things.. Anyways, here's the code I've written along the way, might explain things: <html><body> <img id="dynImg" src="img1.jpg" onClick="alert(this.onLoad)"><br> <a href="javascript:swapImg('dynImg', 'img2.jpg')">change src of dynImg</a><br> <a href="javascript:changeOnLoad()">changeOnload</a><br> <a href="javascript:reLoadImg()">call Onload event explicitly</a> <script type="text/JavaScript"> function doIt1(){ alert('doIt1'); } function doIt2(){ alert('doIt2'); } function swapImg(id, img){ document.getElementById(id).src = img; } function changeOnLoad(){ document.getElementById('dynImg').onLoad = doIt2; } function reLoadImg(){ document.getElementById('dynImg').onLoad(); } </script> </body></html>
Slime Lunatic (VI) Mad Scientist From: Massachusetts, USA Insane since: Mar 2000	posted 07-02-2002 13:38 You should realize that in JavaScript, onLoad means nothing - onload is what you want.
Nevel Bipolar (III) Inmate From: Amsterdam Insane since: Jun 2002	posted 07-02-2002 14:03 Ouch, thanx for the slap on my forehead, I obviously needed it Slime's absolutely right, change every onLoad in the script to onload and it works fine

Topic awaiting preservation: image onload\$

Author

Thread

maninacan
Paranoid (IV) Inmate

From: Seattle, WA, USA
Insane since: Oct 2001

posted 07-02-2002 01:27

how do I access, and change the onload event of an image?

Maninacan Cell #471
kewl
Mad Scientists

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted 07-02-2002 02:55

Well, this might work:

<img src="..." id="importantimage">

...

function somefunc() {dosomething();}
document.getElementById("importantimage").onload = somefunc;

maninacan
Paranoid (IV) Inmate

From: Seattle, WA, USA
Insane since: Oct 2001

posted 07-02-2002 03:21

that's what I tried, but it didn't work

Maninacan Cell #471
kewl
Mad Scientists

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted 07-02-2002 03:25

Yeah, I was thinking it might not. Apparently there's a distinction between the <img> HTML Element and the actual image object that it displays.

I wonder if there's any way to access that image that it contains. One sec.

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted 07-02-2002 03:32

Hmm, let me see the code you're using. Are you putting the script that assigns the onload function *after* the image tag?

maninacan
Paranoid (IV) Inmate

From: Seattle, WA, USA
Insane since: Oct 2001

posted 07-02-2002 04:40

yes, I want to change the onLoad event after the image has loaded. Sort of hard to explain. But I want to change the onLoad event after the image has initially loaded because the src of the image will change dynamically.

Maninacan Cell #471
kewl
Mad Scientists

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted 07-02-2002 04:58

Hmm, that's interesting. I've never tried that.

Are you sure this isn't a case where it would be easier to just preload the images with the JavaScript Image object?

maninacan
Paranoid (IV) Inmate

From: Seattle, WA, USA
Insane since: Oct 2001

posted 07-02-2002 06:14

well, I'm gonna do that if I can't find the answer to this but it's gonna be dynamically changed about 20 or so times, so I'd rather not have such long loading time up front.

Maninacan Cell #471
kewl
Mad Scientists

Nevel
Bipolar (III) Inmate

From: Amsterdam
Insane since: Jun 2002

posted 07-02-2002 13:34

Ok, hang on, cause this is weird stuff indeed..

The problem is not that you aren't able to change the onload-event(http://www.brainjar.com/dhtml/events/),
the problem is onLoad doesn't get called after the first src-value had been loaded.
When you call onLoad explicitly, it does precisely as it's told.

I can't think of a simple solution, don't even know if this is a bug or just the way html handles these things..
Anyways, here's the code I've written along the way, might explain things:

<html><body>

<img id="dynImg" src="img1.jpg" onClick="alert(this.onLoad)"><br>
<a href="javascript:swapImg('dynImg', 'img2.jpg')">change src of dynImg</a><br>
<a href="javascript:changeOnLoad()">changeOnload</a><br>
<a href="javascript:reLoadImg()">call Onload event explicitly</a>

<script type="text/JavaScript">
function doIt1(){ alert('doIt1'); }
function doIt2(){ alert('doIt2'); }
function swapImg(id, img){ document.getElementById(id).src = img; }
function changeOnLoad(){ document.getElementById('dynImg').onLoad = doIt2; }
function reLoadImg(){ document.getElementById('dynImg').onLoad(); }
</script>

</body></html>

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted 07-02-2002 13:38

You should realize that in JavaScript, onLoad means nothing - onload is what you want.

Nevel
Bipolar (III) Inmate

From: Amsterdam
Insane since: Jun 2002

posted 07-02-2002 14:03

Ouch, thanx for the slap on my forehead, I obviously needed it
Slime's absolutely right, change every onLoad in the script to onload and it works fine