使用 JQuery 的手风琴在 Internet Explorer 9 中不显示图像

Question

我的主页上有一个手风琴风格的功能部分，它在 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 进行了测试，结果相同。当我说它正常工作时有时...似乎有时在单击刷新按钮或主页链接或徽标时会导致它正常工作，但如果之后再次刷新，它下次通常不会工作。当它无法工作时，“加载”图像只是不断旋转，但最终图像永远不会显示。

以下代码是我用来预加载图像的代码：（完整的 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 剔除引擎，可以删除它不使用的代码。

Answer 2

呃，我花了很多时间来解决这个问题，似乎我们对手风琴使用了相同的代码（同样的混乱）——在 Kaleidoscope 网页设计模板（http://www.templatesold.com/templates/items/5994/kaleidoscope---html-template.html）中找到了它。起初，在 IE 9 中，图像在按 F5 几次后加载（缓存为空），所以我放入 .htacces ExpiresByType text/html A0 但最近我发现这不是一个好的解决方案.. . Internet Explorer 10 只显示空白（就像图像被隐藏一样）

调试后我发现错误出在 jquery 的 super_image_preloader 插件中，在第 188 行附近，我只是在 this 答案的帮助下替换了 preload 函数

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;
                }