Javascript Performance in Internet Explorer Issue (Conflict with Flash?)

[mudgen]

Hello,

Hello,

I'm having a javascript performance issue. I have a function that is
called many times that fades an image in, and then out, then it
switches to a different image fading it in and then out, and then
doing it with a third image, and then starting over. This code works
fine in Firefox but in Internet Explorer it slows down several flash
items on the page -- slows down to a crawl, and the fading is slow
too. The code works well by itself without flash elements on the page
in Internet Explorer -- but not with flash elements.

Could you please look at the below code. I'm looking for a bottleneck
or something that might interfere with flash for some reason:

images_and_links = [["image1.jpg", "http://www.link1,com"],
["image2.jpg", "http://www.link2.com"],
["image3.jpg", "http://
www.link3.com"]];

for (var i = 0; i <= images_and_links.length - 1; i++) {
image_down_download = new Array();
image_down_download = new Image(146,75);
image_down_download.src = images_and_links[0];
}

function setImage (image_num) {
image_blender = document.getElementById("blend_images");

image_string = "<a href=\"" + images_and_links[image_num][1] + "\">";
image_string += "<img align=\"center\" border=\"0\" id=\"image_alpha
\" class=\"blend_is_0\" src=\"" + images_and_links[image_num][0] +
"\"></a>";

image_blender.innerHTML = image_string;
return;
}

setImage(0);

image_opacity = 0;
image_action = "increase";
image_total = images_and_links.length - 1;
image_num = 0;

function imageFade(){

if (image_action == "increase") {
if(image_opacity <= 8)
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.KhtmlOpacity =
image_opacity;
document.getElementById("image_alpha").style.MozOpacity =
image_opacity;
document.getElementById("image_alpha").style.opacity = image_opacity;
document.getElementById("image_alpha").style.filter =
'alpha(opacity=' + 100 * image_opacity + ')';
setTimeout("imageFade()", 10);
}
imageFade();

The reason I'm calling imageFade every 10 milliseconds is to get the
"fade" effect.

 

[Bill H]

Hello,

Hello,

I'm having a javascript performance issue. I have a function that is
called many times that fades an image in, and then out, then it
switches to a different image fading it in and then out, and then
doing it with a third image, and then starting over. This code works
fine in Firefox but in Internet Explorer it slows down several flash
items on the page -- slows down to a crawl, and the fading is slow
too. The code works well by itself without flash elements on the page
in Internet Explorer -- but not with flash elements.

Could you please look at the below code. I'm looking for a bottleneck
or something that might interfere with flash for some reason:

images_and_links = [["image1.jpg", "http://www.link1,com"],
["image2.jpg", "http://www.link2.com"],
["image3.jpg", "http://www.link3.com"]];

for (var i = 0; i <= images_and_links.length - 1; i++) {
image_down_download = new Array();
image_down_download = new Image(146,75);
image_down_download.src = images_and_links[0];

}

function setImage (image_num) {
image_blender = document.getElementById("blend_images");

image_string = "<a href=\"" + images_and_links[image_num][1] + "\">";
image_string += "<img align=\"center\" border=\"0\" id=\"image_alpha
\" class=\"blend_is_0\" src=\"" + images_and_links[image_num][0] +
"\"></a>";

image_blender.innerHTML = image_string;
return;

}

setImage(0);

image_opacity = 0;
image_action = "increase";
image_total = images_and_links.length - 1;
image_num = 0;

function imageFade(){

if (image_action == "increase") {
if(image_opacity <= 8)
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.KhtmlOpacity =
image_opacity;
document.getElementById("image_alpha").style.MozOpacity =
image_opacity;
document.getElementById("image_alpha").style.opacity = image_opacity;
document.getElementById("image_alpha").style.filter =
'alpha(opacity=' + 100 * image_opacity + ')';
setTimeout("imageFade()", 10);}

imageFade();

The reason I'm calling imageFade every 10 milliseconds is to get the
"fade" effect.

Since you are already using Flash on the page, would it not be easier
to put the images in a flash file and be consistant?

Bill H

 

[David Mark]

Didn't we just have this discussion?

 

[mudgen]

Hello,

I'm having a javascript performance issue. I have a function that is
called many times that fades an image in, and then out, then it
switches to a different image fading it in and then out, and then
doing it with a third image, and then starting over. This code works
fine in Firefox but in Internet Explorer it slows down several flash
items on the page -- slows down to a crawl, and the fading is slow
too. The code works well by itself without flash elements on the page
in Internet Explorer -- but not with flash elements.

Could you please look at the below code. I'm looking for a bottleneck
or something that might interfere with flash for some reason:

images_and_links = [["image1.jpg", "http://www.link1,com"],
["image2.jpg", "http://www.link2.com"],
["image3.jpg", "http://www.link3.com"]];

for (var i = 0; i <= images_and_links.length - 1; i++) {
image_down_download = new Array();
image_down_download = new Image(146,75);
image_down_download.src = images_and_links[0];

}

function setImage (image_num) {
image_blender = document.getElementById("blend_images");

image_string = "<a href=\"" + images_and_links[image_num][1] + "\">";
image_string += "<img align=\"center\" border=\"0\" id=\"image_alpha
\" class=\"blend_is_0\" src=\"" + images_and_links[image_num][0] +
"\"></a>";

image_blender.innerHTML = image_string;
return;


image_opacity = 0;
image_action = "increase";
image_total = images_and_links.length - 1;
image_num = 0;

function imageFade(){

if (image_action == "increase") {
if(image_opacity <= 8)
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.KhtmlOpacity =
image_opacity;
document.getElementById("image_alpha").style.MozOpacity =
image_opacity;
document.getElementById("image_alpha").style.opacity = image_opacity;
document.getElementById("image_alpha").style.filter =
'alpha(opacity=' + 100 * image_opacity + ')';
setTimeout("imageFade()", 10);}

The reason I'm calling imageFade every 10 milliseconds is to get the
"fade" effect.

Since you are already using Flash on the page, would it not be easier
to put the images in a flash file and be consistant?

Bill H

The original developers of the site I'm working on are no longer
working on it, and I don't know flash.