Hello jQuery Masters,

I'm new to jQuery and thought that the best way to learn it would be to write me something useful. Perhaps I bit off more than I can chew, nonetheless, I'm about 98% done a project that I've been working on for some time, and Internet Explorer has reared it's ugly head and bit me in the gonads. Doesn't even matter which IE: 8, 7, 6 all do the same thing, and Chrome, Firefox and Safari all seem to work just fine. Now I realize jQuery is designed to work with everything, so I'm assuming that I've done something wrong and it's the error handling or some other such that's making it all break. I don't know. Hopefully someone here can help me.

Consider the following code (made more verbose than usual for clarity):

1. //Initialize the arrays
2. var image_array = new array();
3. var image_array['id'] = new Array();
4. var image_array['src'] = new Array();
5. //The number of blank images is calculated in the actual
6. //script, but for this sample I will just hardcode it in
7. for (i = -4; i < 1; i++) { // Add 4 blank images at start of array
8.         image_array['id'].push('blank' + i);
9.         image_array['src'].push('/images/blank.jpg');
10. }
11. //Then I add the rest of my images which
12. //are stored in a list PHP generated and CSS hid.
13. //Each li has the id "imagex" where x is an index
14. //that increments by 1 for each subsequent image
15. //starting with 1.
    
16. //Again, I'll use hardcoded numbers here but in my
17. //Script they are generated dynamically
18. for (i=1;i<6;i++) { //Add 5 images after blank images
19.         image_array['id'].push('image' + i);
20.         image_array['src'].push($('#image' + 1).text());
21. }

With my array created, I then called a function to preload the images. I put it in a function because I wanted to use a callback to fade all images in after they've all been preloaded.

The call looks like this:

1. load_thumbs(image_array, function() {
2.         var thumbs = $('#carousel > img'), i = 0;
3.         (function fade_thumbs_in() {
4.                 $(thumbs[i++]).fadeIn('fast', function() {
5.                         if(i < thumbs.length)
6.                                 fade_thumbs_in();
7.                 })
8.         })();
9. }

My function load_thumbs I adapted from one found in a mailing list. The original can be found here. My function is as follows:

1. function load_thumbs(array_of_images, post_processing) {
2.         var img = new Image();
3.         $(img).hide().addClass('thumbnail');
4.         $(img).bind('load', function() {
5.                 if(array_of_images['src'][0]) {
6.                         $(this).attr('id', array_of_images['id'].shift());
7.                         $(this).attr('src', array_of_images['src'].shift());
8.                         $(this).clone().appendTo('#carousel');
9.                 }
10.                 else
11.                         post_processing();
12.         }).trigger('load');
13. }

Now to be fair, I'm not really sure how this works exactly. I am sure that it works, as I said, in anything that's not a Microsoft product. Unfortunately, about half the people who would access the site will do so with IE and I need to support it. I have confirmed that the array being passed to my function has the right number of blanks at the beggining and everything else. I even confirm it assigned them properly. However, by the time all the images are faded in, all the blank ones have changed and show the same image and have the same id as the first non-blank image.

I'm not sure if that's clear, but since pictures speak a thousand words, this is what happens:

Firefox et al
Internet Explorer








Any help would be appreciated as I'm soooo close to finishing this project. And yes, I know there plugins and whatnot that can ease my pain, but I did this mostly to learn. Some minor things I still don't get, but I hope to figure them out via experimentation once I have a working prototype. Also, typos are likely my own fault. I'm pretty sure there aren't any in my script (at least, firebug and IE's developer tools don't report any errors).

Thanks everyone.

DJ