Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Flash, Javascript Time Conflict in Internet Explorer

Reply
Thread Tools

Flash, Javascript Time Conflict in Internet Explorer

 
 
mudgen@gmail.com
Guest
Posts: n/a
 
      09-28-2007
I have a webpage that has two flash animations running. I also have a
javascript script running that rotates 3 images and fades them in and
out. To do the fading and rotating in javascript I am using the
setInterval function, like this:

setInterval(function () {imageFade()},10);


This works fine in Firefox, but in IE 7, the flash animations slow
down a lot, and the javascript fading/rotation slows down some.

There seems to be a timing conflict in IE 7 between flash and
javascript. Any suggestions on how to fix this in IE 7?

 
Reply With Quote
 
 
 
 
David Mark
Guest
Posts: n/a
 
      09-28-2007
On Sep 28, 1:12 pm, "(E-Mail Removed)" <(E-Mail Removed)> wrote:
> I have a webpage that has two flash animations running. I also have a
> javascript script running that rotates 3 images and fades them in and
> out. To do the fading and rotating in javascript I am using the
> setInterval function, like this:
>
> setInterval(function () {imageFade()},10);


What does this imageFade function look like and why call it a hundred
times per second?

 
Reply With Quote
 
 
 
 
Stevo
Guest
Posts: n/a
 
      09-28-2007
http://www.velocityreviews.com/forums/(E-Mail Removed) wrote:
> I have a webpage that has two flash animations running. I also have a
> javascript script running that rotates 3 images and fades them in and
> out. To do the fading and rotating in javascript I am using the
> setInterval function, like this:
>
> setInterval(function () {imageFade()},10);
>
> This works fine in Firefox, but in IE 7, the flash animations slow
> down a lot, and the javascript fading/rotation slows down some.
>
> There seems to be a timing conflict in IE 7 between flash and
> javascript. Any suggestions on how to fix this in IE 7?


One thing that might be happening is that calling your imageFade
function every 10 milliseconds isn't leaving enough time for everything
to run. You could try making some measurements. Make a note of the time
at the start of your imageFade and also at the end. You might find it's
close to 10ms. It's for this reason that I never use setInterval with a
short time. For me, if the time is less than a second, then I usually
prefer to use setTimeout, and put a setTimeout at the end of your
function for the next call. By using setTimeout, you're guaranteeing a
certain amount of "free time" until the next call. There's no perfect
solution, the browser environment is a controlled sandbox and things run
only as fast as allowed when the overhead of that environment being
managed is also accounted for.
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      09-28-2007
(E-Mail Removed) wrote:
> I have a webpage that has two flash animations running. I also have a
> javascript script running that rotates 3 images and fades them in and
> out.


Ouch.

> To do the fading and rotating in javascript I am using the
> setInterval function, like this:
>
> setInterval(function () {imageFade()},10);


No OS timer ticks in 10-millisecond intervals.

> This works fine in Firefox, but in IE 7, the flash animations slow
> down a lot, and the javascript fading/rotation slows down some.
>
> There seems to be a timing conflict in IE 7 between flash and
> javascript. Any suggestions on how to fix this in IE 7?


Don't use setInterval() for time-critical applications; use setTimeout()
instead. Google is your friend. [psf 6.1]


PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$(E-Mail Removed)>
 
Reply With Quote
 
mudgen@gmail.com
Guest
Posts: n/a
 
      09-28-2007
On Sep 28, 10:59 am, David Mark <(E-Mail Removed)> wrote:
> On Sep 28, 1:12 pm, "(E-Mail Removed)" <(E-Mail Removed)> wrote:
>
> > I have a webpage that has two flash animations running. I also have a
> > javascript script running that rotates 3 images and fades them in and
> > out. To do the fading and rotating in javascript I am using the
> > setInterval function, like this:

>
> > setInterval(function () {imageFade()},10);

>
> What does this imageFade function look like and why call it a hundred
> times per second?


the imageFade function looks like this:

function imageFade(){

if (image_action == "increase") {
if(image_opacity <=
image_opacity += 0.04;
else {
image_action = "decrease";
}
}

if (image_action == "decrease") {
if(image_opacity >= .1)
image_opacity -= 0.06;
else {
image_action = "increase";
image_num++;
setImage(image_num);
if (image_num >= image_total)
image_num = -1;
}
}
document.getElementById("image_alpha").style.Khtml Opacity =
image_opacity;
document.getElementById("image_alpha").style.MozOp acity =
image_opacity;
document.getElementById("image_alpha").style.opaci ty = image_opacity;
document.getElementById("image_alpha").style.filte r =
'alpha(opacity=' + 100 * image_opacity + ')';
}
setInterval(function () {imageFade()},10);

 
Reply With Quote
 
David Mark
Guest
Posts: n/a
 
      09-28-2007
On Sep 28, 4:44 pm, "(E-Mail Removed)" <(E-Mail Removed)> wrote:
> On Sep 28, 10:59 am, David Mark <(E-Mail Removed)> wrote:
>
> > On Sep 28, 1:12 pm, "(E-Mail Removed)" <(E-Mail Removed)> wrote:

>
> > > I have a webpage that has two flash animations running. I also have a
> > > javascript script running that rotates 3 images and fades them in and
> > > out. To do the fading and rotating in javascript I am using the
> > > setInterval function, like this:

>
> > > setInterval(function () {imageFade()},10);

>
> > What does this imageFade function look like and why call it a hundred
> > times per second?

>
> the imageFade function looks like this:
>
> function imageFade(){
>
> if (image_action == "increase") {
> if(image_opacity <=


What does that mean?

> image_opacity += 0.04;
> else {
> image_action = "decrease";
> }
> }
>
> if (image_action == "decrease") {
> if(image_opacity >= .1)
> image_opacity -= 0.06;
> else {
> image_action = "increase";
> image_num++;
> setImage(image_num);
> if (image_num >= image_total)
> image_num = -1;
> }
> }
> document.getElementById("image_alpha").style.Khtml Opacity =
> image_opacity;
> document.getElementById("image_alpha").style.MozOp acity =
> image_opacity;
> document.getElementById("image_alpha").style.opaci ty = image_opacity;
> document.getElementById("image_alpha").style.filte r =
> 'alpha(opacity=' + 100 * image_opacity + ')';}


You just wiped out any other filters.

>
> setInterval(function () {imageFade()},10);


Again, why 100 times per second? Adjust the opacity increment amd try
it at 60 times per second. Can your eyes perceive any difference?
Then try it at 30.

As for efficiency, look at how many times you queried for
image_alpha. Also, see my recently posted set_opacity example as you
are doing four times as much work as needed to set the opacity of the
element.

 
Reply With Quote
 
mudgen@gmail.com
Guest
Posts: n/a
 
      09-29-2007
On Sep 28, 2:25 pm, David Mark <(E-Mail Removed)> wrote:
> On Sep 28, 4:44 pm, "(E-Mail Removed)" <(E-Mail Removed)> wrote:
>
>
>
> > On Sep 28, 10:59 am, David Mark <(E-Mail Removed)> wrote:

>
> > > On Sep 28, 1:12 pm, "(E-Mail Removed)" <(E-Mail Removed)> wrote:

>
> > > > I have a webpage that has two flash animations running. I also have a
> > > > javascript script running that rotates 3 images and fades them in and
> > > > out. To do the fading and rotating in javascript I am using the
> > > > setInterval function, like this:

>
> > > > setInterval(function () {imageFade()},10);

>
> > > What does this imageFade function look like and why call it a hundred
> > > times per second?

>
> > the imageFade function looks like this:

>
> > function imageFade(){

>
> > if (image_action == "increase") {
> > if(image_opacity <=

>
> What does that mean?
>
>
>
> > image_opacity += 0.04;
> > else {
> > image_action = "decrease";
> > }
> > }

>
> > if (image_action == "decrease") {
> > if(image_opacity >= .1)
> > image_opacity -= 0.06;
> > else {
> > image_action = "increase";
> > image_num++;
> > setImage(image_num);
> > if (image_num >= image_total)
> > image_num = -1;
> > }
> > }
> > document.getElementById("image_alpha").style.Khtml Opacity =
> > image_opacity;
> > document.getElementById("image_alpha").style.MozOp acity =
> > image_opacity;
> > document.getElementById("image_alpha").style.opaci ty = image_opacity;
> > document.getElementById("image_alpha").style.filte r =
> > 'alpha(opacity=' + 100 * image_opacity + ')';}

>
> You just wiped out any other filters.
>
>
>
> > setInterval(function () {imageFade()},10);

>
> Again, why 100 times per second? Adjust the opacity increment amd try
> it at 60 times per second. Can your eyes perceive any difference?
> Then try it at 30.
>
> As for efficiency, look at how many times you queried for
> image_alpha. Also, see my recently posted set_opacity example as you
> are doing four times as much work as needed to set the opacity of the
> element.


Thanks, where is your set_opacity example?

 
Reply With Quote
 
mudgen@gmail.com
Guest
Posts: n/a
 
      09-29-2007
On Sep 28, 2:25 pm, David Mark <(E-Mail Removed)> wrote:
> On Sep 28, 4:44 pm, "(E-Mail Removed)" <(E-Mail Removed)> wrote:
>
>
>
> > On Sep 28, 10:59 am, David Mark <(E-Mail Removed)> wrote:

>
> > > On Sep 28, 1:12 pm, "(E-Mail Removed)" <(E-Mail Removed)> wrote:

>
> > > > I have a webpage that has two flash animations running. I also have a
> > > > javascript script running that rotates 3 images and fades them in and
> > > > out. To do the fading and rotating in javascript I am using the
> > > > setInterval function, like this:

>
> > > > setInterval(function () {imageFade()},10);

>
> > > What does this imageFade function look like and why call it a hundred
> > > times per second?

>
> > the imageFade function looks like this:

>
> > function imageFade(){

>
> > if (image_action == "increase") {
> > if(image_opacity <=

>
> What does that mean?
>
>
>
> > image_opacity += 0.04;
> > else {
> > image_action = "decrease";
> > }
> > }

>
> > if (image_action == "decrease") {
> > if(image_opacity >= .1)
> > image_opacity -= 0.06;
> > else {
> > image_action = "increase";
> > image_num++;
> > setImage(image_num);
> > if (image_num >= image_total)
> > image_num = -1;
> > }
> > }
> > document.getElementById("image_alpha").style.Khtml Opacity =
> > image_opacity;
> > document.getElementById("image_alpha").style.MozOp acity =
> > image_opacity;
> > document.getElementById("image_alpha").style.opaci ty = image_opacity;
> > document.getElementById("image_alpha").style.filte r =
> > 'alpha(opacity=' + 100 * image_opacity + ')';}

>
> You just wiped out any other filters.
>
>
>
> > setInterval(function () {imageFade()},10);

>
> Again, why 100 times per second? Adjust the opacity increment amd try
> it at 60 times per second. Can your eyes perceive any difference?
> Then try it at 30.
>
> As for efficiency, look at how many times you queried for
> image_alpha. Also, see my recently posted set_opacity example as you
> are doing four times as much work as needed to set the opacity of the
> element.


> You just wiped out any other filters.


By default are there filters?

 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      09-29-2007
Randy Webb wrote:
> Thomas 'PointedEars' Lahn said the following on 9/28/2007 4:18 PM:
>> (E-Mail Removed) wrote:
>>> This works fine in Firefox, but in IE 7, the flash animations slow
>>> down a lot, and the javascript fading/rotation slows down some.
>>>
>>> There seems to be a timing conflict in IE 7 between flash and
>>> javascript. Any suggestions on how to fix this in IE 7?

>> Don't use setInterval() for time-critical applications; use setTimeout()
>> instead.

>
> You think that 2 flash apps animating and an image slide show is "time
> critical"?


If the frame length of the animation should be 10 milliseconds, yes.


PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$(E-Mail Removed)>
 
Reply With Quote
 
Dr J R Stockton
Guest
Posts: n/a
 
      09-29-2007
In comp.lang.javascript message <(E-Mail Removed)>, Fri,
28 Sep 2007 22:18:51, Thomas 'PointedEars' Lahn <(E-Mail Removed)>
posted:
>
>No OS timer ticks in 10-millisecond intervals.
>


That's rather a strong statement; are you sure that you know about EVERY
OS - or even every one that supports Javascript?

ISTR reading that the Win98/WinXP timer, while running by default at
64Hz, can be set by a program to run at other speeds; and that the new
speed will be maintained whilst that other program continues to run. I
don't assert that as a proven fact, though.

--
(c) John Stockton, Surrey, UK. ???@merlyn.demon.co.uk Turnpike v6.05 MIME.
Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
Check boilerplate spelling -- error is a public sign of incompetence.
Never fully trust an article from a poster who gives no full real name.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Internet Explorer 8: C:\Program Files\Internet Explorer\iexplore.exe vs C:\Program Files (x86)\Internet Explorer\iexplore.exe Nathan Sokalski Windows 64bit 16 02-22-2010 08:31 AM
internet explorer 7 - Internet Explorer cannot display the webpag sandy j Windows 64bit 0 05-02-2009 02:12 AM
css conflict (or html conflict) charles cashion HTML 2 02-18-2009 09:41 PM
Javascript Performance in Internet Explorer Issue (Conflict with Flash?) mudgen@gmail.com Javascript 3 10-02-2007 01:23 AM
Is time.time() < time.time() always true? flamesrock Python 8 11-24-2006 06:51 AM



Advertisments