javascript - 使用 jQuery.show() 交换元素时，消除 Chrome 中的短暂闪烁

Question

问题描述:

当通过 jQuery 的 .show() 交换对象时，Chrome 似乎会短暂地显示一个闪光灯(间歇地，但通常)。

示例:

JSFiddle link.

代码:

var $catGo = $('#cat_animate');
var $catStop = $('#cat_still');

$('#wrapper').on('click', '#cat_still', function() {
    setTimeout(function() {
        $catGo.attr('src', 'http://i.imgur.com/kPUYc5y.gif');
    }, 0);
    $catGo.show();
    $catStop.hide();
    setTimeout(function() {
        $catGo.hide();
        $catStop.show();
        setTimeout(function() {
            $catGo.attr('src', '');
        }, 0);
    }, 11400);
});

附加说明:

在 Chrome 中点击这只猫，注意它如何将静止图像换成动画图像，当它切换到动画图像时经常会出现短暂的闪光。这在 Firefox 或我尝试过的任何其他浏览器中从未发生过。有没有办法以编程方式消除它？试试你的手!

Answer 1

更新:

所以firefox好像缓存图片不错，直接去那个图片刷新一下就可以了。不过，下面的代码似乎适用于 Firefox 和 Chrome。

http://jsfiddle.net/YwVuV/

var $catGo = $('#cat');

$('#wrapper').on('click', '#cat', function() {
    setTimeout(function() {
        $catGo.attr('src', 'http://i.imgur.com/kPUYc5y.gif');
}, 0);
    setTimeout(function() {
        $catGo.attr('src', 'http://i.imgur.com/64a9Ofb.jpg');
    }, 11400);
});

这个更新的 Fiddle 还通过将 setTimeout 分配给一个变量并在点击时清除它来协助多次点击图像，因此多次点击不会执行多个 src 更改。

http://jsfiddle.net/24sTS/

希望这对您有所帮助。