jquery - 使用 JQuery 的 Accordion 在 Internet Explorer 9 中不显示图像

Question

我的主页上有一个 Accordion 风格的功能部分，它在 IE 7/8、FF、Opera 和 Chrome 中可以正常工作，但在 IE 9 中不能正常工作。该网站位于 http://ntwo.com 。我尝试过使用不同版本的 JQuery(v1.4.1、v1.4.2、v1.5.1、v1.5.1rc1)，但都没有解决该问题。我必须提到它有时可以正常工作。

行为如下:当它按预期运行时，会预加载 5 个图像，加载完成后从左到右显示。当图像预加载时，“加载”图像会在各自的位置旋转。所有图像都是 .png 文件，但是，我也使用 jpeg 进行了测试，结果相同。当我说它有时可以正常工作时...似乎有时单击刷新按钮或主页链接或 Logo 会使其正常工作，但如果此后再次刷新，它就会通常下次就不行了。当它无法工作时，“加载”图像只是不断旋转，但最终图像永远不会显示。

以下代码是我用来预加载图像的代码:(完整的js文件位于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.length);
                        }
                    }
                    else if (options.callback != '')
                    {
                        (options.callback)();
                    }
                }
            }
        };
        imageContainer.operations.preload();
    });
}
})(jQuery);

我不知道这是否是问题所在，非常感谢任何见解。

谢谢，埃里克

Answer 1

事实上，那些说你应该改变支架样式的人可能是有道理的。首先尝试更改大括号，使它们遵循 K&R 风格(将大括号与条件/函数放在同一行，而不是在自己的行上悬空)。在 Javascript 中使用 Allman 风格实际上会导致代码无法工作:http://encosia.com/2011/03/21/in-javascript-curly-brace-placement-matters-an-example/ 。我会从这个开始，看看它是否能解决任何问题。其他需要记住的事情是 IE9 有一个 JS 剔除引擎，可以删除它不认为正在使用的代码。