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

Discussion in 'Javascript' started by mudgen@gmail.com, Oct 2, 2007.

  1. Guest

    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.
     
    , Oct 2, 2007
    #1
    1. Advertising

  2. Bill H Guest

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

    On Oct 1, 7:42 pm, "" <> wrote:
    > 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
     
    Bill H, Oct 2, 2007
    #2
    1. Advertising

  3. David Mark Guest

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

    On Oct 1, 7:42 pm, "" <> wrote:

    Didn't we just have this discussion?
     
    David Mark, Oct 2, 2007
    #3
  4. Guest

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

    On Oct 1, 5:49 pm, Bill H <> wrote:
    > On Oct 1, 7:42 pm, "" <> wrote:
    >
    >
    >
    > > 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


    The original developers of the site I'm working on are no longer
    working on it, and I don't know flash.
     
    , Oct 2, 2007
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. charles cashion

    css conflict (or html conflict)

    charles cashion, Feb 18, 2009, in forum: HTML
    Replies:
    2
    Views:
    800
    charles cashion
    Feb 18, 2009
  2. Ed Hauptman
    Replies:
    7
    Views:
    1,032
    Ed Hauptman
    Aug 7, 2009
  3. Chuck
    Replies:
    0
    Views:
    92
    Chuck
    Nov 27, 2003
  4. Replies:
    3
    Views:
    118
  5. Replies:
    15
    Views:
    254
Loading...

Share This Page