SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    click detection weirdly slow in IE

    I am using javascript to let users advance through all the available images of four different products (shirts). A simple concept... click on a shirt image and the next image of that shirt will load in its place. It works fine in Firefox and Chrome. But in IE7 and 8, while the image does swap as quickly as expected, there is a lag before IE seems to detect the next mouse click. So if a user wants to click three times in fairly rapid succession, Firefox and Chrome quickly detect all three clicks and swap through the next three images, but IE might only detect the first click and ignore the next two clicks. After about a full second, IE seems ready to detect another click. So if you click SLOWLY using IE, it works as expected. If you click quickly, IE lags behind. Just sort of annoying, I hope it's something I can fix in my code or something (I'm a noob). I am taking into consideration that I will need to preload these images when possible, but this IE delay happens even when testing locally, so I doubt it's going to resolve itself once I write a preloading script.

    here is a test of the page I am working on.. not all the links are functional yet, but the images of people wearing each shirt are functional (and are the ones I'm talking about).

    tinyurl.com/yf9zc6w

    and the code (note: var s=which shirt design it is, var n=how many images are available to cycle through)

    <script language="JavaScript">
    function advanceImage(s,n) {
    this.x = n+1;
    this.i = 1;
    this.next = function(img) {
    this.i++;
    if (this.i == this.x)
    this.i = 1;
    img.src = 'shirt'+s+'-'+this.i+'.jpg';
    }
    }

    /* create a new advanceImage object for each shirt, and pass to this object which shirt it is and how many images are available for that shirt */
    var shirt1 = new advanceImage(1,2);
    var shirt2 = new advanceImage(2,3);
    var shirt3 = new advanceImage(3,3);
    var shirt4 = new advanceImage(4,3);
    </script>

    here is an example of the HTML to call the function
    <img src='shirt3-1.jpg' onclick="shirt3.next(this)">

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When you click rapidly, the dblclick event might get fired. IE seems to fire this event instead of the click event. A few other browsers I tested seem to fire the event in addition to the click event. So, you would expect your event handler to get called half as often during rapid clicking, if it's IE.

    You could use the mousedown event as an easy alternative. A notable difference is click requires the mouse pointer remain over the element between the time when mousedown and mouseup fire for it to be considered a click. You probably don't care for something like this though.

  3. #3
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that makes perfect sense... I appreciate the help.


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
  •