Question

这个让我挠头......

在客户端网站上工作，他们要求快速启动屏幕。这应循环显示几张图片（最后一张是他们的徽标），然后淡出，主页淡入。

我在http://tutorialzine.com/2010/11/apple-style-splash-screen-jquery/找到了一些代码，它在FF上工作正常，但是导致了IE7的问题。

在IE7中，启动画面循环直到它到达最后一个图像，然后停止 - 它不会淡出到主页面，它只是坐在那里。如果我单击（跳过启动并淡入主页），它会起作用，因此脚本不会挂起。玩完之后，我发现那是特定的文件 - logo-final.gif - 这导致了挂起。

长话短说，似乎有冲突，因为我在主页面中使用logo-final.gif来显示徽标。如果我复制了logo-final.gif并将其命名为logo-5.gif或其他什么，它就可以了。如果我从主页面删除调用logo-final.gif的img标签，它就可以了。但是如果我尝试在主页上加载logo-final.gif并在脚本中调用它，它就不起作用。

这只是一个奇怪的IE7错误吗？任何解决方法？我可以通过复制徽标图像并在脚本中调用新的文件名来绕过它，但是浪费带宽（虽然很小）只是为了哄骗'craptastic IE7。注意 - 我没有在FF 3.6.15和IE 7.0.5731.11之外的任何其他浏览器中进行测试，因为我现在正在使用借用计算机......

感谢您的帮助！

下面的脚本和HTML：

JQuery的：

(function($){

$.fn.splashScreen = function(settings){

    settings = $.extend({

        imageLayers: [],
        imageShowTime: 700
    },settings);

    var splashScreen = $('<div>',{
        id: 'splashScreen',
        css:{
            height: $(document).height()+100
        }
    });

    $('body').append(splashScreen);
    splashScreen.click(function(){
        splashScreen.fadeOut('slow');
    });

    splashScreen.bind('changeImage',function(e,newID){

        if (settings.imageLayers[newID]){
            showImage(newID);
        } else {
            splashScreen.click();
        }
    });

    splashScreen.trigger('changeImage',0);

    function showImage(id) {
        var image = $('<img>',{src:settings.imageLayers[id]}).hide();

        image.load(function(){
            image.fadeIn('slow').delay(settings.imageShowTime).fadeOut('slow',function(){
image.remove();
                splashScreen.trigger('changeImage',[id+1]);
        });
    });

splashScreen.append(image);
}


return this;
}
})(jQuery);

HTML（在HEAD中）：

<script type="text/javascript" src="scripts/jquery.1.5.1.js"></script>
<script type="text/javascript" src="scripts/splashScreen.js"></script>

<script type="text/javascript">
$(document).ready(function(){
     $('#logo').splashScreen({
     imageLayers : [
     'images/splash-1.gif',
     'images/splash-2.gif',
     'images/splash-3.gif',
     'images/logo-final.gif'
     ]
     });
});
</script>

主页面中的img标签似乎导致了冲突：

<h1><a href="index.html"><img src="images/logo-final.gif" alt="logo" /></a></h1>

另外，发现原始教程的演示也遇到了问题。要查看它，请转到http://demo.tutorialzine.com/2010/11/apple-style-splash-screen-jquery/ - 启动画面应该可以在第一次正常工作，但如果您在IE中刷新（F5）它应该在第一个图像淡出后挂起。

Answer 1

好的 - 我回到家并在IE8上测试并发现了同样的问题。调试显示在缓存图像时没有调用image.load（） - 导致我原来的问题（因为img被加载到主页面上）和我的刷新问题。在http://css-tricks.com/snippets/jquery/fixing-load-in-ie-for-cached-images/

找到了解决方案

我将图像声明和.load函数更改为以下内容，所有内容似乎都正常工作！

var image = $("<img />")
   .attr("src",settings.imageLayers[id]+ "?" + new Date().getTime());
image.hide();

image.load(function(){
    image.fadeIn('slow').delay(settings.imageShowTime).fadeOut('slow',function(){
        image.remove();
        splashScreen.trigger('changeImage',[id+1]);  
    });
});

我讨厌IE！：）

Answer 2

一个简单的解决方案是在html的“静态”图像中添加查询，如：

<img src="images/logo-final.gif?v=a" alt="logo" />

但这将使用“额外”带宽。

IE未在页面刷新时调用JQuery .load（）函数的问题 - 跟踪到图像缓存

2 个答案: