2011-12-20 66 views
0

我用javascript创建了一个简单的图像旋转器,但它对于“较旧的浏览器”(例如IE 6,7和8)速度较慢。图像将首先加载我认为,然后启动旋转器..一些技巧,使其更快?Javascript image rotator在较旧的浏览器中速度较慢

为什么我自己创造了一个旋转器?我发现的所有旋转器都会剪切(剪切)图像。我需要完整的图像......必要时有一些空白左/右或上/下。

JavaScript部分:

//Loop through pictures 
var tid = setInterval(mycode, 3000); 
function mycode() { 

    if($.random(0,1) == 1){ 
     //Fade 
     $('#alleplaatjes img.active').fadeOut(500,function(){ 
      $(this).removeClass(); 

      if($(this).next().length == 0){ 
       $('#alleplaatjes img').first().fadeIn(500); 
       $('#alleplaatjes img').first().addClass('active'); 
      } else { 
       $(this).next().fadeIn(500); 
       $(this).next().addClass('active'); 
      } 
     }); 
    } else { 
     //Slide 
     $('#alleplaatjes img.active').slideUp(500,function(){ 
      $(this).removeClass(); 

      if($(this).next().length == 0){ 
       $('#alleplaatjes img').first().slideDown(500); 
       $('#alleplaatjes img').first().addClass('active'); 
      } else { 
       $(this).next().slideDown(500); 
       $(this).next().addClass('active'); 
      } 
     }); 
    } 
}; 

PHP部分:

<?php 

$dir = "/home/zwuq/domains/***/public_html/afbeelding/"; 
foreach(glob($dir."*") as $file){ 
    $afbeelding = 'afbeelding/'.str_replace($dir, '', $file); 
    $toevoeging = FALSE; 
    if(!$eerste_plaatje){ 
     $toevoeging = ' class="active"'; 
     $eerste_plaatje = $afbeelding; 
    } 
    $plaatjes .= '<img'.$toevoeging.' src="'.$afbeelding.'" style="max-width: 99%; max-height: 99%;">'; 
} 

?> 

HTML部分:

<div id="alleplaatjes" style="width:100%; height:100%; margin:0px; padding:0px; z-index:1; text-align: center;"> 
    <? echo $plaatjes; ?> 
</div> 
+2

定义 “旧的浏览器”? – 2011-12-20 18:22:56

+1

你只是指旧版浏览器,还是说旧版浏览器的旧版电脑? – jprofitt 2011-12-20 18:24:26

+0

刚刚添加:)例如IE6,7和8 – Roy 2011-12-20 18:25:57

回答

1

一个建议是不要用setInterval。如果操作时间过长(在您的情况下,超过3秒),累计的延迟将导致您的动画变得更糟。

要尝试我的建议,只需拨打setTimeout而不是setInterval,然后在mycode的末尾再次调用setTimeout。理想情况下,您会跟踪您的函数被调用的时间,并调整传递给下一个超时的时间间隔。

为了在此处获得StackOverflow的最佳结果,在http://jsfiddle.net上发布示例会让其他人现场看到问题,并可能帮助我们帮助您。

另一个建议

缓存您的jQuery对象。例如,而不是:

$(this).removeClass(); 
    if($(this).next().length == 0){ 
     $('#alleplaatjes img').first().fadeIn(500); 
     $('#alleplaatjes img').first().addClass('active'); 
    } else { 
     $(this).next().fadeIn(500); 
     $(this).next().addClass('active'); 
    } 

你应该有

// prepending jquery variables with $ to distinguish them 
    var $this = $(this), 
     $next = $this.next(); 
    $this.removeClass(); 

    if($next.length == 0){ 
     var $first = $('#alleplaatjes img').first(); 
     $first.fadeIn(500); 
     $first.addClass('active'); 
    } else { 
     $next.fadeIn(500); 
     $next.addClass('active'); 
    } 
+0

我会改变我的代码,让我们看看如果运行更好 – Roy 2011-12-20 19:18:04

相关问题