IE event firing...

[jamescover]

Why does IE choke on this script? Meaning, if you check it in FF the images change as expected, however, IE's functionality lags far behind.

In fact, if you keep clicking on the images, it will appear that they are being downloaded from the sever, even though they have been preloaded.

I've noticed this same behavior regarding the updating of text form fields, so that you have to call the same function on both onmouseup and onmousedown in order to get the functionality you'd expect from just onclick.

I've posted the code for future reference, but you can test this via the link below:


http://ekigroup.com/javascript/swapImg.html

<script type="text/javascript">
<!--

var oImgs = [];
oImgs[0] = "image1.gif"
oImgs[1] = "image2.gif"
oImgs[2] = "image3.gif"
oImgs[3] = "image4.gif"
oImgs[4] = "image5.gif"

for(var i=0;i<oImgs.length;i++){
var imgs = new Image();
imgs.src = "images/" + oImgs[i];
}

var x = 1;

function swapImg(){
var doc = document.getElementById("swap");
doc.src = "images/" + oImgs[x];
if(x<oImgs.length-1){
x ++;
}else{
x = 0;
}
}

//-->
</script>

Event Handler & Image Tag:

<img id="swap" src="images/image1.gif" width="150" height="150" border="0" onclick="swapImg();" style="cursor:pointer;" />


Actually, I just want to know if anyone has a better way of doing this to reproduce the behavior of Mozilla.


Thanks,



-james

[glenngv]

All images are not actually preloaded because you store each image in the same variable causing the browser to overwrite the previous preloaded image. The end result is the last image in the array is the only preloaded image. The solution is to preload the images in an array not in a single variable.

var arrPreload = new Array();
for(var i=0;i<oImgs.length;i++){
arrPreload[i] = new Image();
arrPreload[i].src = "images/" + oImgs[i];
}

[jamescover]

All images are not actually preloaded because you store each image in the same variable causing the browser to overwrite the previous preloaded image. The end result is the last image in the array is the only preloaded image. The solution is to preload the images in an array not in a single variable.

var arrPreload = new Array();
for(var i=0;i<oImgs.length;i++){
arrPreload[i] = new Image();
arrPreload[i].src = "images/" + oImgs[i];
}



How can you illustrate that, Glenn? After clearing my cache, then reloading, they all appear in the cache before clicking.

I realize what you are alluding to is normal behavior, like when looping through form fields, but all of the images are being preloaded.



-james

[jamescover]

var arrPreload = new Array();
for(var i=0;i<oImgs.length;i++){
arrPreload[i] = new Image();
arrPreload[i].src = "images/" + oImgs[i];
}

I get the same result in IE:

http://ekigroup.com/javascript/blank.html

Rapidly click on the images in IE, then in FF.


-james

[glenngv]

How can you illustrate that, Glenn? After clearing my cache, then reloading, they all appear in the cache before clicking.
-james
I tested your code in Firefox and IE and I now I know what you were saying. In Firefox, the image swaps faster than IE when you click the image continuously. It might be due to event handling in IE and not caching problem. As I see it, you have to set a little delay after clicking before clicking it again, otherwise, it will fire ondblclick (ondouble click) event. I think that behavior is more appropriate. To illustrate this, try double-clicking the image. Double-clicking should fire the onclick event only once because the second click constitutes the ondblclick event. That's the behavior IE is doing while Firefox fires onclick twice. Logically, it should fire onclick only once when you double click because ondblclick is another event.

[jamescover]

I tested your code in Firefox and IE and I now I know what you were saying. In Firefox, the image swaps faster than IE when you click the image continuously. It might be due to event handling in IE and not caching problem. As I see it, you have to set a little delay after clicking before clicking it again, otherwise, it will fire ondblclick (ondouble click) event. I think that behavior is more appropriate. To illustrate this, try double-clicking the image. Double-clicking should fire the onclick event only once because the second click constitutes the ondblclick event. That's the behavior IE is doing while Firefox fires onclick twice. Logically, it should fire onclick only once when you double click because ondblclick is another event.

Thanks, for responding, Glenn.

I'm not convinced it's a caching problem either. Although, I'm not sure...they both fire onmouseup, otherwise, you could mousedown, then remove your cursor, and the images would still change.

Maybe, you remember the thread about IE event firing when adding form field values I started a couple of months ago (to which you posted).


Check out these two functions in IE & Mozilla(click on the button as fast as you can, and notice the difference in the totals:


http://www.ekigroup.com/javascript/mozilla.html

I discovered that by adding the onmousedown focus, fixed the problem in IE, while both functions behave identically in Mozilla.

Hmmm...while writing this, i think I discovered the reason, at least, concerning images. I have my Internet Options (Tools > Internet Options > Settings) set to check for newer versions of stored pages every visit to page. When I change it to check Automatically, the problem seems to disappear. Which accounts for why the problem doesn't appear when testing offline. Although, you still don't get the same results as Mozilla. IE, seems to lag behind.


...can you think of any way to work around this?


-james

[glenngv]

Read my previous post again. The gist of my post is not about caching but about the behavior of click and double click actions which could probably explain the behavior of IE when clicking continuously on an element.

[jamescover]

Okay....but:


...can you think of any way to work around this?

For example, adding the focus to the form control onmousedown worked...so what about the nature of event firing in the case of image swaps...can you think of a workaround for this?

I cannot.






-james