IE未在页面刷新时调用JQuery .load（）函数的问题 - 跟踪到图像缓存 [英] Issue with IE not calling JQuery .load() function on page refresh - traced to image caching

问题描述

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

This one has me scratching my head...

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

Working on a client site, they asked for a quick splash screen. This should cycle through a couple of images (the last one being their logo), then fade out and the main page fades in.

我在 http://tutorialzine.com/2010/11/apple-style-splash- screen-jquery / 可以在FF上正常工作，但是会导致IE7出现问题。

I found some code over at http://tutorialzine.com/2010/11/apple-style-splash-screen-jquery/ which works fine on FF, but is causing problems with IE7.

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

In IE7, the splash screen cycles until it gets to the last image, then stops - it does not fade out to the main page, it just sits there. If I click (which skips the splash and fades to the main page), it works, so the script isn't hung. After playing around, I found it was that particular file - logo-final.gif - which was causing the hang.

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

Long story shorter, it seems to be conflicting because I use logo-final.gif in the main page to show the logo. If I make a copy of logo-final.gif and call it logo-5.gif or whatever, it works. If I remove the img tag calling logo-final.gif from the main page, it works. But if I try and load logo-final.gif on the main page AND call it in the script, it doesn't work.

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

Is this just a weird IE7 bug? Any workarounds? I can get around it by copying the logo image and calling the new filename in the script, but what a waste of bandwidth (albeit tiny) just to coddle ol' craptastic IE7. Note - I've not tested in any other browsers than FF 3.6.15 and IE 7.0.5731.11 since I am on a loaner computer right now...

谢谢你任何帮助！

下面的脚本和HTML：

Script and HTML below:

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中）：

HTML (in 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标签似乎导致了冲突：

And the img tag in the main page body which seems to be causing the conflict:

<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）它应该在第一个图像淡出后挂起。

Also, found the demo of the original tutorial also experiences the problem. To see it, go to http://demo.tutorialzine.com/2010/11/apple-style-splash-screen-jquery/ -- the splashscreen should work fine the first time, but if you refresh (F5) in IE it should hang after the first image fades out.

推荐答案

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

a simple solution would be to add a query to the "static" image at the html, like:

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

但这将使用额外带宽。

这篇关于IE未在页面刷新时调用JQuery .load（）函数的问题 - 跟踪到图像缓存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！