Accordion using JQuery is not showing images in Internet Explorer 9

I have an accordion style feature section on a home page that is working correctly in IE 7/8, FF, Opera, and Chrome but not in IE 9. The site is live at http://ntwo.com. I have tried using different versions of JQuery (v1.4.1,v1.4.2,v1.5.1,v1.5.1rc1) and none have corrected the issue. I must mention that it works correctly sometimes.

The behavior is as follows: When it operates as expected, the 5 images preload and then are displayed from left to right once finished loading. While the images are preloading, a "loading" image is shown rotating in their respective places. All images are .png files, however, I have tested with jpeg as well with the same results. When I said it works correctly sometimes...It appears that sometimes when clicking the refresh button or the home link or the logo will cause it to work correctly, but then if you refresh again after that, it usually will not work the next time. When it fails to work the "loading" images simply rotate continually, but the final images never show.

Following code is what I am using to preload the images: (the full js file is at http://ntwo.com/scripts/custom.js)

{
$.fn.super_image_preloader = function (options)
{
    var defaults = {
        repeatedCheck: 550,
        fadeInSpeed: 1100,
        delay: 200,
        callback: ''
    };
    var options = $.extend(defaults, options);
    return this.each(function ()
    {
        var imageContainer = jQuery(this),
            images = imageContainer.find('img').css(
            {
                opacity: 0,
                visibility: 'hidden'
            }),
            imagesToLoad = images.length;
        imageContainer.operations = {
            preload: function ()
            {
                var stopPreloading = true;
                images.each(function (i, event)
                {
                    var image = $(this);
                    if (event.complete == true)
                    {
                        imageContainer.operations.showImage(image);
                    }
                    else
                    {
                        image.bind('error load', {
                            currentImage: image
                        }, imageContainer.operations.showImage);
                    }
                });
                return this;
            },
            showImage: function (image)
            {
                imagesToLoad--;
                if (image.data.currentImage != undefined)
                {
                    image = image.data.currentImage;
                }
                if (options.delay <= 0) image.css('visibility', 'visible').animate(
                {
                    opacity: 1
                }, options.fadeInSpeed);
                if (imagesToLoad == 0)
                {
                    if (options.delay > 0)
                    {
                        images.each(function (i, event)
                        {
                            var image = $(this);
                            setTimeout(function ()
                            {
                                image.css('visibility', 'visible').animate(
                                {
                                    opacity: 1
                                }, options.fadeInSpeed);
                            }, options.delay * (i + 1));
                        });
                        if (options.callback != '')
                        {
                            setTimeout(options.callback, options.delay * images.leng开发者_StackOverflow中文版th);
                        }
                    }
                    else if (options.callback != '')
                    {
                        (options.callback)();
                    }
                }
            }
        };
        imageContainer.operations.preload();
    });
}
})(jQuery);

I don't know if this is where the problem is or not, any insight is greatly appreciated.

Thanks, Eric

---

Actually, the person who says you should change your brace style is probably on to something. First try changing your braces so that they follow K&R style (opening brace on the same line as condition / function, instead of dangling on its own line). Using Allman style in Javascript can actually cause code not to work: http://encosia.com/2011/03/21/in-javascript-curly-brace-placement-matters-an-example/ . I'd start with that and see if it fixes anything. Other things to keep in mind is IE9 has a JS culling engine that removes code that it doesn't thing is being used.

---

Uff, I spent LOT of time solving this, seems that we were using same code for accordion (same mess) - found it in Kaleidoscope web design template (http://www.templatesold.com/templates/items/5994/kaleidoscope---html-template.html). At first, in IE 9 images was loading after push F5 for a few times (cache empty) so I put into .htacces ExpiresByType text/html A0 but lately I found that was not the good solution... Internet Explorer 10 was displaying just white spaces (like the images was hidden)

After debugging i found that mistake is in jquery´s super_image_preloader plugin, there, around row 188 I just replaced preload function with help of this answer

preload:function(){
                    images.each(function(i,event){
                            var image=$(this);
                            var imageSrc=$(this).attr("src");
                            $('<img/>')[0].src = imageSrc;
                            imageContainer.operations.showImage(image);
                        });
                    return this;
                }