旧浏览器中的 Javascript 图像旋转器速度很慢答案

【问题标题】：Javascript image rotator slow in older browsers旧浏览器中的 Javascript 图像旋转器速度很慢
【发布时间】：2011-12-20 18:21:45
【问题描述】：

我已经使用 javascript 创建了一个简单的图像旋转器，但使用“旧浏览器”（例如 IE 6、7 和 8）速度很慢。我认为图像将首先加载，然后启动旋转器。. 一些让它更快的提示？

为什么我自己创建了一个旋转器？我发现的所有旋转器都剪切（裁剪）了图像。我需要完整的图像...必要时在左/右或上/下留一些空白。

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>

【问题讨论】：

定义“旧浏览器”？
您的意思是旧版浏览器，还是使用旧版浏览器的旧电脑？
刚刚添加 :) 例如 IE6、7 和 8
我也可以编写在较新的浏览器中非常缓慢的图像旋转。这没什么大不了的。您可能对网络浏览器期望过高。使用代码，而不是光滑的效果。如果您检测到它是一个快速浏览器，您可以添加它们，这样每个人都可以使用您的网站。
cut the images 这是否意味着裁剪？还是您指的是一些如何执行转换？

标签： php javascript jquery html rotator

【解决方案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');
    }

【讨论】：