某些浏览器上的简单jquery淡入淡出幻灯片失败

时间:2011-01-17 18:48:35

标签: javascript jquery slideshow

所以我在我的网站上有一个简单的幻灯片,只显示一个图像然后显示另一个图像,直到它到达结尾或用户点击跳过,在这种情况下它显示index.html。该网站使用Django在apache2上提供。幻灯片放映在大多数机器上都能很好地工作,但某些机器会显示两次图像,而其他图像则根本不显示,时间关闭。我正在使用jquery 1.4.3。

下面是html的部分,我将图片网址从数据库推送到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();
   });
};

奇怪的是,我已经让它工作并且在同一个操作系统上的相同版本编号的浏览器上失败但在不同的机器上失败。它一直在机器上工作或失败。

我已经失败了,即7,8 firefox 3.6.3和chrome。我也在ie6,7,8 firefox 3.6.3,3.4.2,3.1和chrome中取得了成功。

1 个答案:

答案 0 :(得分:0)

如果您的浏览器(例如IE7)在一个地方失败但在另一个地方工作,那么每个地方的设置是否相同 - 例如缓存?他们有类似的网络连接速度吗?首先想到的是你需要一个预加载器,因为幻灯片放映可能是从不完整的图像文件/不完整的图像数组开始的