更新

Question

是否有其他人在滑块正下方看到三个按钮/图像集的闪烁行为：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中）一起开始的。

无论如何，我努力寻求解决方案，我们将非常感谢任何反馈。

谢谢！

更新

我用实际代码替换[做东西]。它基本上是寻找上面滑块中出现的三个可能类之一，然后根据哪个类更改下面ID的背景图像。

更新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技能，而不是代码）。

Answer 1

我没有第一次得到它，但是当我刷新时，我做到了。

这让我觉得你有竞争条件。也许第一次加载脚本文件花费的时间比执行时要长，所以没有问题。当我刷新时，它全部从缓存中拉出并导致问题。我不确定，这只是一种预感，但它与你的间歇性描述一致。

但是，我打算对您的功能进行健全性检查...每隔一刻钟您通过http请求将三个元素的图像加载到远程服务器。

有几种方法可以完成你想要做的事情，我建议将所有图像放入一个精灵中，然后更新background-position属性，而不是实际图像。

另外，我看到你试图将这与你的幻灯片动画联系在一起，但它并不完全准确。当然，无论您正在进行幻灯片放映，都可以使用回调函数，因此您只能根据需要触发此动画？

Answer 2

在更改之前，您可能应该检查背景图像的新来源是否相同：

//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代码粘贴到您的网站中，并且它会停止不断闪烁，但是当幻灯片发生变化时，只有一次闪烁。

Chrome中奇怪的内容行为 - 闪烁

2 个答案:

更新

更新