简单的 jquery Fade Slideshow 在某些浏览器上失败

Question

因此，我的网站上有一个简单的幻灯片，仅显示一张图像，然后显示另一张图像，直到到达末尾或用户点击“跳过”，在这种情况下它会显示 index.html。该网站在 apache2 上使用 Django 提供服务。幻灯片在大多数机器上都能完美运行，但某些机器会显示某些图像两次，而其他图像则根本不显示，并且计时已关闭。我正在使用jquery 1.4.3。

下面是 html 的部分，我将图像 url 从数据库推送到 javascript

{% for image in latest_images %}
{% thumbnail image.image_file "800x600" crop="center" as im %}
<script>FadeImageList.push("{{im.url}}");</script>
{% endthumbnail %}
{% endfor %}

下面是完整的 javascript 文件

var FadeImageList = [];

var fadeDuration = 2000;
var fadeImgID = '#slideShow';
var homePageID = '#homePage';
var menuID = '#menu';
var skipFlag = 0;

$(document).ready(function(){

$(homePageID).fadeOut(50);

PlaySlideshow(FadeImageList);

});

var PlaySlideshow = function(FadeImageList){
    var newImgSrc = FadeImageList.shift();

     $('#skip').click(function(){$('#loader').show();skipFlag = 1;});


    if(((typeof(newImgSrc) !== "string") || (skipFlag === 1))){
        EndSlideShow();
        return;
    }
    else{
         $(fadeImgID).fadeOut(fadeDuration,function(){
            $(fadeImgID).attr('src', newImgSrc);
            $(fadeImgID).fadeIn(fadeDuration,function(){
                PlaySlideshow(FadeImageList);
            });
         });
     }
};

var EndSlideShow = function(fadeSettings){
   $(fadeImgID).fadeOut(400,function(){
     $(homePageID).fadeIn(400);
     $("#skip").fadeOut(400);
     $('#loader').hide();
   });
};

奇怪的是，我让它工作，但在同一操作系统但不同机器上的相同版本编号的浏览器上失败。它在机器上始终要么工作要么失败。

我在 ie 7,8、firefox 3.6.3 和 chrome 中都失败了。我也在 ie6,7,8 firefox 3.6.3,3.4.2,3.1 和 chrome 中取得了成功。

Answer 1

当您的浏览器（例如 IE7）在一个地方失败但在另一个地方工作时，每个浏览器的本地设置是否相同 - 例如缓存？他们的网络连接速度相似吗？首先想到的是您需要一个预加载器，因为幻灯片很可能以不完整的图像文件/不完整的图像数组开始