Using Javascript to loop images??

Discussion in 'Javascript' started by OBAFGKM_RNS@yahoo.com, Apr 17, 2007.

  1. Guest

    Let's say I have a Javascript function that loops over and over. In
    that function i have it alternating images on a button this way:

    if(var==0){
    var myHTML = "<input type='button' style='background-image:
    url(grnbutt.jpg);etc. etc.'>";
    var outq = document.getElementById("qbutt");
    outq.innerHTML = myHTML;
    }
    else{
    var myHTML = "<input type='button' style='background-image:
    url(grnbuttdark.jpg);etc. etc.'>";
    var outq = document.getElementById("qbutt");
    outq.innerHTML = myHTML;
    }

    This works great using Firefox, and works with Internet Explorer also
    EXCEPT if its set to "Check for newer versions of stored pages: Every
    visit to the page". With that setting, IE will download those 2 images
    from the server every single time through the loop. So then I tried
    putting both images on the same jpg and then moving the image:

    if(var==0){
    var elem = document.getElementById("grn");
    elem.style.backgroundPosition = "-100px 0";
    }
    else{
    var elem = document.getElementById("grn");
    elem.style.backgroundPosition = "center";
    }

    This also works, but also, constantly downloads new images when using
    IE with the above setting. Microsoft calls this a "feature". They then
    offer a fix for this "feature" that... doesn't work. Preloading
    doesn't work. Loading the 2 images in a <div> set to invisible doesn't
    work. I've tried suggestions of creating php files that tell the
    browser that the images don't expire for years. That didn't work for
    me. Many people have also suggested that there is no way around it...
    it can't be fixed until Microsoft fixes it.

    So, is there any javascript way to loop 2 images on a button, without
    Internet Explorer constantly downloading those 2 images over and over,
    when its set to "Check for newer versions of stored pages: Every visit
    to the page"??
    , Apr 17, 2007
    #1
    1. Advertising

  2. Darko Guest

    On Apr 17, 7:29 pm, wrote:
    > Let's say I have a Javascript function that loops over and over. In
    > that function i have it alternating images on a button this way:
    >
    > if(var==0){
    > var myHTML = "<input type='button' style='background-image:
    > url(grnbutt.jpg);etc. etc.'>";
    > var outq = document.getElementById("qbutt");
    > outq.innerHTML = myHTML;
    > }
    > else{
    > var myHTML = "<input type='button' style='background-image:
    > url(grnbuttdark.jpg);etc. etc.'>";
    > var outq = document.getElementById("qbutt");
    > outq.innerHTML = myHTML;
    > }
    >
    > This works great using Firefox, and works with Internet Explorer also
    > EXCEPT if its set to "Check for newer versions of stored pages: Every
    > visit to the page". With that setting, IE will download those 2 images
    > from the server every single time through the loop. So then I tried
    > putting both images on the same jpg and then moving the image:
    >
    > if(var==0){
    > var elem = document.getElementById("grn");
    > elem.style.backgroundPosition = "-100px 0";
    > }
    > else{
    > var elem = document.getElementById("grn");
    > elem.style.backgroundPosition = "center";
    > }
    >
    > This also works, but also, constantly downloads new images when using
    > IE with the above setting. Microsoft calls this a "feature". They then
    > offer a fix for this "feature" that... doesn't work. Preloading
    > doesn't work. Loading the 2 images in a <div> set to invisible doesn't
    > work. I've tried suggestions of creating php files that tell the
    > browser that the images don't expire for years. That didn't work for
    > me. Many people have also suggested that there is no way around it...
    > it can't be fixed until Microsoft fixes it.
    >
    > So, is there any javascript way to loop 2 images on a button, without
    > Internet Explorer constantly downloading those 2 images over and over,
    > when its set to "Check for newer versions of stored pages: Every visit
    > to the page"??


    Did you try putting the image in the div, and setting its src argument
    to the specified string, having preloaded them before that?
    Thinking clearly, however, it makes perfect sense if that doesn't
    work, since that exactly was the whole point - they made a feature
    that checks for newer versions every time, and now you want to
    override this feature - thus directly opposing the user's will -
    that's not good design. The user's the boss, not you.

    However, the above solution (not setting css, but having x = new
    Image( "..." ), then later saying
    document.getElementById( "image1" ).src = "...", might work, at least
    it's worth a shot?
    Darko, Apr 17, 2007
    #2
    1. Advertising

  3. Guest

    Thanks Darko. I will try to figure out what you wrote, but I am too
    burned out at the moment to try it. However, the Internet Explorer
    issue is this: Its supposed to check for a new page on every visit to
    that page, NOT download the same image over and over again on the same
    page without it being refreshed or revisited. I have no problem with
    it downloading fresh images on each visit to the page (which is what
    its supposed to do). Its a known bug that has many attempted
    solutions. None, so far, have worked.

    On Apr 17, 2:34 pm, Darko <> wrote:
    > On Apr 17, 7:29 pm, wrote:
    >
    >
    >
    > > Let's say I have a Javascript function that loops over and over. In
    > > that function i have it alternating images on a button this way:

    >
    > > if(var==0){
    > > var myHTML = "<input type='button' style='background-image:
    > > url(grnbutt.jpg);etc. etc.'>";
    > > var outq = document.getElementById("qbutt");
    > > outq.innerHTML = myHTML;
    > > }
    > > else{
    > > var myHTML = "<input type='button' style='background-image:
    > > url(grnbuttdark.jpg);etc. etc.'>";
    > > var outq = document.getElementById("qbutt");
    > > outq.innerHTML = myHTML;
    > > }

    >
    > > This works great using Firefox, and works with Internet Explorer also
    > > EXCEPT if its set to "Check for newer versions of stored pages: Every
    > > visit to the page". With that setting, IE will download those 2 images
    > > from the server every single time through the loop. So then I tried
    > > putting both images on the same jpg and then moving the image:

    >
    > > if(var==0){
    > > var elem = document.getElementById("grn");
    > > elem.style.backgroundPosition = "-100px 0";
    > > }
    > > else{
    > > var elem = document.getElementById("grn");
    > > elem.style.backgroundPosition = "center";
    > > }

    >
    > > This also works, but also, constantly downloads new images when using
    > > IE with the above setting. Microsoft calls this a "feature". They then
    > > offer a fix for this "feature" that... doesn't work. Preloading
    > > doesn't work. Loading the 2 images in a <div> set to invisible doesn't
    > > work. I've tried suggestions of creating php files that tell the
    > > browser that the images don't expire for years. That didn't work for
    > > me. Many people have also suggested that there is no way around it...
    > > it can't be fixed until Microsoft fixes it.

    >
    > > So, is there any javascript way to loop 2 images on a button, without
    > > Internet Explorer constantly downloading those 2 images over and over,
    > > when its set to "Check for newer versions of stored pages: Every visit
    > > to the page"??

    >
    > Did you try putting the image in the div, and setting its src argument
    > to the specified string, having preloaded them before that?
    > Thinking clearly, however, it makes perfect sense if that doesn't
    > work, since that exactly was the whole point - they made a feature
    > that checks for newer versions every time, and now you want to
    > override this feature - thus directly opposing the user's will -
    > that's not good design. The user's the boss, not you.
    >
    > However, the above solution (not setting css, but having x = new
    > Image( "..." ), then later saying
    > document.getElementById( "image1" ).src = "...", might work, at least
    > it's worth a shot?
    , Apr 17, 2007
    #3
    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. Guest
    Replies:
    4
    Views:
    883
    Eliyahu Goldin
    Jan 4, 2005
  2. Luis Esteban Valencia Muñoz
    Replies:
    0
    Views:
    755
    Luis Esteban Valencia Muñoz
    Jun 3, 2005
  3. wardemon

    Cache Images vs Static Images

    wardemon, Jun 14, 2007, in forum: ASP .Net
    Replies:
    3
    Views:
    647
    bruce barker
    Jun 14, 2007
  4. Keith Hughitt
    Replies:
    6
    Views:
    1,060
  5. Isaac Won
    Replies:
    9
    Views:
    354
    Ulrich Eckhardt
    Mar 4, 2013
Loading...

Share This Page