SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image swap works in Firefox, buggy in IE

    Hi everyone, I'm using the following Javascript to load an image when a thumbnail is clicked:

    Code:
    function switchVertical(identifier) {
    
    var myPageTitle = document.getElementById("title");
    var myPage = myPageTitle.childNodes[0].id;
    var mySrc = '/greece/images/' + myPage + '/' + myPage + '0' + identifier + '.jpg';
    var thisThumb = document.getElementById("imageHolder");
    thisThumb.style.border = "solid 1px #f3f7f9";
    thisThumb.setAttribute('src', '/greece/images/loading.gif');
    var nextImage = new Image();
    nextImage.src = '/greece/images/' + myPage + '/' + myPage + '0' + identifier + '.jpg';
    nextImage.onload = function ()
    {
    thisThumb.style.border = "solid 1px #6e6e6e";
    thisThumb.setAttribute('width', '260');
    thisThumb.setAttribute('height', '400');
    thisThumb.setAttribute('src', nextImage.src);
    }
    }
    The problem in IE is that it works fine the first time a thumbnail is clicked, but when the user clicks the same thumbnail again, they don't get the new image appearing. Instead the "loading.gif" image appears indefinitely.

    Just to clarify, there are 15 thumbnails. When thumbnails 1 through 15 are clicked one at a time, the larger images appears on the right side of the page just fine. But when the user tries to click the thumbnails AGAIN, they do not get the large image appearing -- they only see the "loading.gif" image. It seems that IE messes up the code where it says "nextImage.onload = function ()", since no code in the function actually runs when the thumbnail is clicked a 2nd time.

    Does anyone have any idea why this is happening in IE6/7 but works fine in Firefox? There are no script warnings or errors in either browser.

    Thanks,

    Louis.

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I solved it -- Google is great.

    Okay, well that was a quick fix. I googled the problem in the meantime and I moved the following line:

    nextImage.src = '/greece/images/' + myPage + '/' + myPage + '0' + identifier + '.jpg';

    to instead appear AFTER the onload function is done.

    This link was the source of the solution:

    http://www.thefutureoftheweb.com/blo...t-being-called

    Louis.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •