image.addEvent('load', imageLoaded) only works once

1 view
Skip to first unread message

woomla

unread,
Nov 20, 2009, 5:56:32 AM11/20/09
to MooTools Users
I have a function that creates an image with new Image. Then I addEvent
('load', imageLoaded), then I set the image.src. When the image is
loaded the event fires and in imageLoaded I show the image in the
html.

Timer based I call this function every second. Only the very first
image triggers the event. Subsequent images do not trigger and thus
are never displayed.

If I set image.onload then that function is called every time.

For some reason image.addEvent only works one time. Very strange isn't
it?

I've setup an example at http://mooshell.net/MhvQj
Run and then click 'start'. You'll see that the received counter that
is increased on imageLoaded only get to 1. The loads counter that is
increased in the onload handler, grows for every time an image is
received.

W.,

Oskar Krawczyk

unread,
Nov 20, 2009, 11:46:36 AM11/20/09
to mootool...@googlegroups.com

Sanford Whiteman

unread,
Nov 20, 2009, 12:49:58 PM11/20/09
to Oskar Krawczyk
> http://mooshell.net/MhvQj/1

Aren't you just fake-firing the onload here? Maybe I didn't look at it
closely enough, but it seems like the OP's problem still exists, since
the fake-firing is not really sensitive to a successful vs. failed
image download.

Think you want

image.removeEvents('load').addEvent('load', imageLoaded);

(or a real singleton for that event)

-- Sandy

keif

unread,
Nov 20, 2009, 4:12:31 PM11/20/09
to MooTools Users
I have to disagree - it's not strange, it's expected. Based on your
example, you're NOT loading multiple images. You're loading one. I'd
suggest trying this method with an array of images, as when you
request one image, it's cached in memory, and you're no longer
requesting a new image, as it's loaded.

As well, generally for those purposes, I'd use the Asset.image or
Asset.Images to accomplish what you are trying.

-kb

On Nov 20, 5:56 am, woomla <woo...@gmail.com> wrote:
> I have a function that creates an image with new Image. Then I addEvent
> ('load', imageLoaded), then I set the image.src. When the image is
> loaded the event fires and in imageLoaded I show the image in the
> html.
>
> Timer based I call this function every second. Only the very first
> image triggers the event. Subsequent images do not trigger and thus
> are never displayed.
>
> If I set image.onload then that function is called every time.
>
> For some reason image.addEvent only works one time. Very strange isn't
> it?
>
> I've setup an example athttp://mooshell.net/MhvQj

Ryan Florence

unread,
Nov 20, 2009, 8:18:24 PM11/20/09
to mootool...@googlegroups.com
What's the actual use case here?

Ryan Florence

[Writing TextMate Snippets] ( http://blog.flobro.com/ )

mooyah

unread,
Nov 21, 2009, 1:03:51 PM11/21/09
to MooTools Users
If you break the cache with every load, the image is actually
requested, and therefore the onLoad event will fire correctly.

http://mooshell.net/aUdMm/

On Nov 20, 3:56 am, woomla <woo...@gmail.com> wrote:
> I have a function that creates an image with new Image. Then I addEvent
> ('load', imageLoaded), then I set the image.src. When the image is
> loaded the event fires and in imageLoaded I show the image in the
> html.
>
> Timer based I call this function every second. Only the very first
> image triggers the event. Subsequent images do not trigger and thus
> are never displayed.
>
> If I set image.onload then that function is called every time.
>
> For some reason image.addEvent only works one time. Very strange isn't
> it?
>
> I've setup an example athttp://mooshell.net/MhvQj

Sanford Whiteman

unread,
Nov 21, 2009, 4:22:30 PM11/21/09
to mooyah
> If you break the cache with every load, the image is actually
> requested, and therefore the onLoad event will fire correctly.

The underlying question isn't one of caching, it's of event scope.

The intrinsic event will fire even if the image is loaded from cache,
as would be expected. It would break gobs of logic if it did not work
this way: imagine having to invalidate the image cache to get
consistent results -- talk about backward! And it is certainly not
expected behavior that the addEvent'd function does not run, while the
intrinsic one does: we are taught that the advanced event model is a
superset of the traditional model.

-- Sandy

Thierry bela nanga

unread,
Nov 21, 2009, 4:29:22 PM11/21/09
to mootool...@googlegroups.com
I'm not sure that if the image is loaded from cache, even is fired,

I usually do something like this, 


var image = $(new Image()).set('src', options.src)
.addEvent('load', function () {  
                                                     //...
});
                                //fire manually if image is loaded from the cache
if(image.width && image.height) image.fireEvent('load');
--
http://tbela99.blogspot.com/

fax : (+33) 08 26 51 94 51

Sanford Whiteman

unread,
Nov 21, 2009, 5:15:09 PM11/21/09
to Thierry bela nanga
> I'm not sure that if the image is loaded from cache, even is fired

Depends on what the event is attached to and which event model is in
use.

Intrinsic syntax, attached to an uninjected Image object -- the event
will continually be fired even with same source URL (*this is to me
the expected behavior).

Intrinsic, to the DOM IMG element -- the event will only fire once.

addEvent, to the Image -- the event needs to be readded (scope issue,
AFAICS), but then will continually be fired with same source URL.

http://mooshell.net/aUdMm/3

So I think the point is, the addEvent model does not sufficiently
superset the intrinsic "x.onload=" model to be non-astounding.

But I will get some more cases together tonight or tomorrow.

-- Sandy

Reply all
Reply to author
Forward
0 new messages