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