Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #15837 > unrolled thread

Good way to construct animation player?

Back to article view | Back to comp.lang.javascript

Contents

  Good way to construct animation player? Bint <bint@ign.com> - 2012-09-11 09:06 -0500
    Re: Good way to construct animation player? Martin Leese <please@see.Web.for.e-mail.INVALID> - 2012-09-11 08:38 -0600
      Re: Good way to construct animation player? Bint <bint@ign.com> - 2012-09-11 10:41 -0500
    Re: Good way to construct animation player? SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-09-12 03:38 +0200
      Re: Good way to construct animation player? Bint <bint@ign.com> - 2012-09-11 20:48 -0500
        Re: Good way to construct animation player? SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-09-12 12:26 +0200

#15837 — Good way to construct animation player?

Hello,

  I have an animation gallery online -- the animations are represented as
folders of sequentially numbered image frames (PNG files).  I want to make a
player for these, where the user can click on a thumbnail and it will play
the frames in a loop.

I've tried this in the past and given up -- I ran into memory issues after
loading a certain number of frames.  It seemed that once I hit about 5MB of
frames total processed, it stopped working.  I didn't figure out how to free
the images that I was no longer using.

Back then, I think I was just loading the images using html image tags,
replacing the source value maybe?  It has been a couple of years and I have
lost that old code.

Now, I was wondering if there might be a better, maybe more memory efficient
way by using the canvas tag?

I still am not sure how to get the image files themselves from the server to
the client-side javascript.  Anyone have any suggestions?

Thanks!
B

[toc] | [next] | [standalone]

#15841

Bint wrote:
> Hello,
> 
>   I have an animation gallery online -- the animations are represented as
> folders of sequentially numbered image frames (PNG files).

Is there some reason why you are not using
GIF images?

-- 
Regards,
Martin Leese
E-mail: please@see.Web.for.e-mail.INVALID
Web: http://members.tripod.com/martin_leese/

[toc] | [prev] | [next] | [standalone]

#15845

>>   I have an animation gallery online -- the animations are represented as
>> folders of sequentially numbered image frames (PNG files).
> 
> Is there some reason why you are not using
> GIF images?

The images already exist, I can't change them.   Probably because PNG is
lossless and GIF is only 256 colors?  Anyway there are thousands of
animations and they are already in PNG.

B

[toc] | [prev] | [next] | [standalone]

#15864

Le 11/09/12 16:06, Bint a écrit :
> Hello,
>
>    I have an animation gallery online -- the animations are represented as
> folders of sequentially numbered image frames (PNG files).  I want to make a
> player for these, where the user can click on a thumbnail and it will play
> the frames in a loop.

JS :
====

var nb = 100,        // how many images
     f  = 'album_01', // folder of these images
     i,               // the image to display
     c  = nb;         // a counter
function player() {
if(i) document.images.viewer.src = i.src;
c++;
if(c >= nb) c=0;
i = new Image();
i.onload = function(){ setTimeout('player()',2000);}
i.src = f + '/' + c + '.png';
}


HTML :
======

<div>
	<p><img name="viewer" src="album_01/100.png" alt="ecran"></p>
	<p><button id="but" onclick="player();">play</button>
</div>



But ... you can certainly find examples more sophisticated
... with fading for instance.
<http://ygda.free.fr/fonduEnchaine2.htm>

-- 
Stéphane Moriaux avec/with iMac-intel

[toc] | [prev] | [next] | [standalone]

#15865

>> Hello,
>> 
>>    I have an animation gallery online -- the animations are represented as
>> folders of sequentially numbered image frames (PNG files).  I want to make a
>> player for these, where the user can click on a thumbnail and it will play
>> the frames in a loop.
> 
> JS :
> ====
> 
> var nb = 100,        // how many images
>      f  = 'album_01', // folder of these images
>      i,               // the image to display
>      c  = nb;         // a counter
> function player() {
> if(i) document.images.viewer.src = i.src;
> c++;
> if(c >= nb) c=0;
> i = new Image();
> i.onload = function(){ setTimeout('player()',2000);}
> i.src = f + '/' + c + '.png';
> }
> 
> 
> HTML :
> ======
> 
> <div>
> <p><img name="viewer" src="album_01/100.png" alt="ecran"></p>
> <p><button id="but" onclick="player();">play</button>
> </div>
> 
> 
> 
> But ... you can certainly find examples more sophisticated
> ... with fading for instance.
> 
> <http://ygda.free.fr/fonduEnchaine2.htm>

Thanks! -- this looks similar to what I used in the past.  It worked as I
recall, but once the total number of loaded images passed 5MB, it stopped.
Do you know any way around that?  Is there any way to dispose of the memory
used for images I no longer plan to show?

It seems to cache them all and not free the memory, and then it stops being
able to load them around 5Mb.

Bint

[toc] | [prev] | [next] | [standalone]

#15867

Le 12/09/12 03:48, Bint a écrit :
>
>>> Hello,
>>>
>>>     I have an animation gallery online -- the animations are represented as
>>> folders of sequentially numbered image frames (PNG files).  I want to make a
>>> player for these, where the user can click on a thumbnail and it will play
>>> the frames in a loop.
>>
>> JS :
>> ====
>>
>> var nb = 100,        // how many images
>>       f  = 'album_01', // folder of these images
>>       i,               // the image to display
>>       c  = nb;         // a counter
>> function player() {
(blah)

> Thanks! -- this looks similar to what I used in the past.  It worked as I
> recall, but once the total number of loaded images passed 5MB, it stopped.
> Do you know any way around that?  Is there any way to dispose of the memory
> used for images I no longer plan to show?
>
> It seems to cache them all and not free the memory, and then it stops being
> able to load them around 5Mb.

Never I saw that (I do not use IE, known to have memory leaks)

Normally, with that given script, all images are cached under same name 
('i').
I imagine that only the last called image is cached.
I expect that the memory is freed of all other ones.
(in return: Always load and reload images from the server)

Tried locally with Firefox n Safari and a 100Mb folder --> no problémo
(RAM = 8Gb)

For info, my Firefox Memory cache :
	Number of entries: 	89
	Maximum storage size: 	32768 KiB
	Storage in use: 	110 KiB

-- 
Stéphane Moriaux avec/with iMac-intel

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web