Странное поведение контента в Chrome - мигает - PullRequest
Новая
       13

Странное поведение контента в Chrome - мигает

0 голосов
/ 10 марта 2012

Кто-нибудь еще видит мигание трех кнопок / наборов изображений прямо под ползунком здесь: http://foodforhealthinternational.com/

Я не вижу его каждый раз, и это происходит только в Chrome, но этопохоже, связано со следующим jQuery, так как вспышки синхронизированы с setTimeout этого скрипта: 

function checkForChanges()
{
    if(jQuery("#slider-banner").hasClass('right-partner'))
    {
        jQuery("#home-middle-first").css("background-image","url([image path]/turnkey_hover.png)");
        jQuery("#home-middle-second").css("background-image","url([image path]/raw_ing_normal.png)");
        jQuery("#home-middle-third").css("background-image","url([image path]/copack_normal.png)");
    }
    else if(jQuery("#slider-banner").hasClass('living-nutrients'))
    {
        jQuery("#home-middle-second").css("background-image","url([image path]/raw_ing_hover.png)");
        jQuery("#home-middle-first").css("background-image","url([image path]/turnkey_normal.png)");
        jQuery("#home-middle-third").css("background-image","url([image path]/copack_normal.png)");
    }
    else if(jQuery("#slider-banner").hasClass('with-you'))
    {
        jQuery("#home-middle-third").css("background-image","url([image path]/copack_hover.png)");
        jQuery("#home-middle-first").css("background-image","url([image path]/turnkey_normal.png)");
        jQuery("#home-middle-second").css("background-image","url([image path]/raw_ing_normal.png)");
    }

    setTimeout(checkForChanges, 250);
}
jQuery(checkForChanges);

Дело в том, что это работало нормально более суток.Это могло начаться в сочетании с несколькими плагинами, добавленными другими (это в WordPress).

В любом случае, я очень стараюсь найти разрешение, и любая обратная связь будет принята с благодарностью.

Спасибо!

ОБНОВЛЕНИЕ:

Я заменил [делать вещи] реальным кодом.В основном он ищет один из трех возможных классов, показанных на слайдере выше, а затем изменяет фоновые изображения для идентификаторов ниже в зависимости от того, какой класс.

ОБНОВЛЕНИЕ 2:

Приняв совет ниже, я работал над сценарием, чтобы управлять позиционированием, а не вызывать новое изображение для изменения фона.Кроме того, я нашел способ вызывать функцию при загрузке каждого изображения, так что таймер не должен превышать 1/4 секунды ...

Теперь он просто добавляет или удаляет класс, который изменяет положение фоновых изображений. 

function checkForChanges()
    {
        if(jQuery("#slider-banner").hasClass('right-partner'))
        {
            jQuery("#home-middle-first").addClass("home-middle-hover");
            jQuery("#home-middle-second").removeClass("home-middle-hover");
            jQuery("#home-middle-third").removeClass("home-middle-hover");
        }
        else if(jQuery("#slider-banner").hasClass('living-nutrients'))
        {
            jQuery("#home-middle-second").addClass("home-middle-hover");
            jQuery("#home-middle-first").removeClass("home-middle-hover");
            jQuery("#home-middle-third").removeClass("home-middle-hover");
        }
        else if(jQuery("#slider-banner").hasClass('with-you'))
        {
            jQuery("#home-middle-third").addClass("home-middle-hover");
            jQuery("#home-middle-first").removeClass("home-middle-hover");
            jQuery("#home-middle-second").removeClass("home-middle-hover");
        }
    }

Я все еще пытаюсь включить некоторые другие советы, чтобы использовать цикл и переменные, но мои попытки переделать приведенный ниже код не увенчались успехом (мое отсутствие навыков jQuery, а не кода).

Ответы [ 2 ]

1 голос
/ 10 марта 2012

Возможно, вам следует проверить, совпадают ли новые источники фоновых изображений, прежде чем их менять: 

//cache all selections that are used each time `checkForChanges()` runs
var $banner = jQuery("#slider-banner"),
    $first  = jQuery("#home-middle-first"),
    $second = jQuery("#home-middle-second"),
    $third  = jQuery("#home-middle-third"),
    convert = [
        {
            class : 'right-partner',
            src   : ['/turnkey_hover.png', 'raw_ing_normal.png', '/copack_normal.png']
        },
        {
            class : 'living-nutrients',
            src   : ['/raw_ing_hover.png', 'turnkey_normal.png', '/copack_normal.png']
        },
        {
            class : 'with-you',
            src   : ['/copack_hover.png', '/turnkey_normal.png', '/raw_ing_normal.png']
        }
    ];

function checkForChanges()
{
    //iterate through each of the classes to check
    for (var i = 0; i < 3; i++) {

        //check if the class at the current index is currently applied to the banner
        if ($banner.hasClass(convert[i].class)) {

            //check to see if the background-images are already set to the current index
            if ($first.css('background-image') != convert[i].src[0]) {

                //if not then change the background-images
                $first.css('background-image', convert[i].src[0]);
                $second.css('background-image', convert[i].src[1]);
                $third.css('background-image', convert[i].src[2]);
            }

            //since we found the class applied to the banner we don't need to run this loop anymore, so stop it
            break;
        }
    }

    setTimeout(checkForChanges, 250);
}
jQuery(checkForChanges);

Обновление

Мне потребовалось некоторое время, чтобы увидеть, кем вы быливместо того, чтобы опрашивать страницу на предмет изменений, попробуйте использовать функцию обратного вызова вашего скрипта слайд-шоу.

Обновление

Я вставил свой JS-код в ваш сайт через консоль JS, и этопрекращает постоянное мигание, однако при смене слайда мигает один раз.

1 голос
/ 10 марта 2012

Я не получил это в первый раз, но когда я обновился, я сделал.

Это заставляет меня думать, что у вас есть состояние гонки.Возможно, в первый раз для загрузки файла сценария потребовалось больше времени, чем для его выполнения, поэтому проблем не было.Когда я обновился, все это было извлечено из кеша и вызвало проблему.Я не уверен, это всего лишь догадка, но это соответствует вашему прерывистому описанию.

Однако я собираюсь вызвать проверку работоспособности вашей функции ... каждую четверть секунды вызагрузка изображения для трех элементов через http-запрос на удаленный сервер.

Есть несколько способов выполнить то, что вы пытаетесь сделать, я бы порекомендовал поместить все изображения в один спрайт и затем обновитьсвойство background-position, в отличие от реального изображения.

Кроме того, я вижу, что вы пытаетесь связать это с анимацией слайд-шоу, но это не совсем точно.Разумеется, что бы вы ни делали, ваше слайд-шоу имеет возможность использовать функцию обратного вызова, поэтому вы можете запускать эту анимацию только по мере необходимости?

...