Chrome не всегда повторяет события с помощью JavaScript setInterval () - PullRequest
Новая
       10

Chrome не всегда повторяет события с помощью JavaScript setInterval ()

0 голосов
/ 29 июля 2011

Я хочу отображать несколько изображений одинакового размера в одной позиции, по одному, с интервалом 5 с между изменениями. Для этого я использовал jQuery.Timer, который использует setInterval () для вызова некоторой функции show_next_image () каждые 5 секунд.

Он действительно работает с IE, Opera, Safara, Firefox и ... частично с Google Chrome. Это не работает с Google Chrome, если я открою новое окно и напрямую наберу URL своего сайта: он покажет второе изображение и остановится. И в любой другой ситуации (перезагрузите, из другой ссылки, не сразу после открытия нового окна) это будет плохо работать: можно увидеть заднее изображение до того, как будет показано переднее изображение.

Таким образом, мне интересно, сделал ли я что-то не так с моим источником JavaScript. То, что я делаю, я использую переднее и заднее изображение. Когда я хочу показать следующее изображение, задний источник img устанавливается на новое изображение, а переднее изображение исчезает, а заднее изображение - через jQuery. Вы можете проверить это в http://www.laurent -carbon.com / (на французском языке). Два img отождествляются с bg1 и bg2. 

var images = ["/img/IMG_0435bg.jpg", "/img/IMG_0400bg.jpg", "/img/maisonnette 2.jpg", "/img/IMG_0383bg.jpg", "/img/IMG_0409bg.jpg", "/img/IMG_0384bg.jpg"];
var idx = 1;
var waitTime = 5000; // ms

$(document).ready(function() {
    $("#bg2").hide();
    $.timer(waitTime, load_next);
    $.preLoadImages(images);
});

function load_next(timer) {
    var toshow = images[idx];
    idx++;
    idx %= images.length;

    back_image().attr('src', toshow);

    swap_images();
}

function front_image() {
    return (idx % 2 == 0) ? $("#bg1") : $("#bg2");
}

function back_image() {
    return (idx % 2 == 0) ? $("#bg2") : $("#bg1");
}

function swap_images() {
    back_image().fadeOut('slow');
    front_image().fadeIn('slow');
}

Спасибо, Ceylo

Ответы [ 2 ]

1 голос
/ 29 июля 2011

Хорошо, я разработал решение .... без использования плагинов.

Демо

http://jsfiddle.net/morrison/PvPXM/9/show

источник

http://jsfiddle.net/morrison/PvPXM/9/

Этот подход намного чищеи устраняет проблему, с которой я столкнулся при просмотре вашей страницы в chrome: синхронизация анимации и мигание.

Единственное, что вам нужно сделать в HTML, - это обернуть два изображения в <div id="fadeBox" style="position:relative"></div>* 1018.* 

$(function() {
    var images = [
        "http://www.laurent-carbon.com/img/IMG_0435bg.jpg",
        "http://www.laurent-carbon.com/img/IMG_0400bg.jpg",
        "http://www.laurent-carbon.com/img/maisonnette 2.jpg",
        "http://www.laurent-carbon.com/img/IMG_0383bg.jpg",
        "http://www.laurent-carbon.com/img/IMG_0409bg.jpg",
        "http://www.laurent-carbon.com/img/IMG_0384bg.jpg"
        ];
    var idx = 1;
    var max = images.length;
    var easing = "swing";
    var waitTime = 5000; // ms
    var fadeTime = 2000; // ms
    var fadeShow = function(fadeTime, fadeDelay) {
        var $topImage = $("#fadeBox img:last");
        $topImage.fadeTo(fadeDelay, 1, function() {
            $topImage.fadeTo(fadeTime, 0, easing, function() {
                $topImage
                    .fadeTo(0, 1)
                    .insertBefore("#fadeBox img:first")
                    .attr("src", images[++idx == max ? idx = 0 : idx]);
                fadeShow(fadeTime, fadeDelay);
            });
        });
    };

    fadeShow(fadeTime, waitTime);
});

Надеюсь, это поможет

PS спасибо Леви за небольшую очистку кода.

1 голос
/ 29 июля 2011

Ответ: http://jsfiddle.net/morrison/RxyZY/

Примечания:

  • Вы пытаетесь заново изобрести колесо. Вы создаете простое слайд-шоу. Есть множество плагинов, чтобы сделать именно это и многое другое. В моем примере я использовал цикл jQuery , который чрезвычайно настраиваемый .
  • Вы должны обернуть свои вещи в функцию, создав выражение. В моем примере (function($){}(jQuery)) - это то, что делает трюк. Он определяет ваши переменные в функции, а не в глобальном пространстве имен.
...