Ротатор изображений Javascript медленнее в старых браузерах - PullRequest
Новая
       39

Ротатор изображений Javascript медленнее в старых браузерах

0 голосов
/ 20 декабря 2011

Я создал простой ротатор изображений с 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>

1 Ответ

1 голос
/ 20 декабря 2011

Одно из предложений не использовать 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');
    }
...