Hi,
I'm having some troubles using the load() event for images, since it
seems to behave totally different in every browser...
What I try to do is:
- fade an image out
- load another image (or the same again)
- fade the image in as soon as it's finished loading
Heres the code I use for testing (jQuery version: 1.2.2):
<script type="text/javascript">
var images = new Array("images/resultate/D RESULTATE.JPG");
var imagePos = 0;
$(document).ready(function() {
$("#image").bind('load', function(){
$("#image").fadeIn();
$("#log").append("load() triggered<br>");
});
$("#link").bind('click', function(){
change_img();
});
});
function change_img() {
imagePos = (++imagePos > images.length-1) ? 0 : imagePos;
$("#image").fadeOut(function() {
$("#image").attr("src", images[imagePos]);
});
}
</script>
<img src="images/resultate/D RESULTATE.JPG" width="100" alt=""
border="0" id="image">
<br>
<a href="#" id="link">Click</a>
You can also see it in action here:
http://www.rakuun.de/Stuff/Schasler/load_test.html
Now, the strange things are:
- In IE 6, the load event of the image isn't always triggered when
the page is loaded (probably got something to do with caching, but I
think it should fire anyway?). This is especially noticeable when you
try it with a page from your hard disk.
- In FF 2, it seems to fire too early/not at all for huge images?
Can't really prove that, though. I guess it got something to do with
caching as well.
- In Opera 9, the event is ONLY fired when the page is loaded, never
again after that!
So, I think the main problem is caching.
Shouldn't the event be triggered if the image is loaded from some
cache instead from the web as well?
Is there any way I can get the correct behaviour in every browser?
