みかづきブログ その3

3ヶ月つづけてみました。

Androidでは初期状態が display:none; のgifアニメが動かない時があるらしい

本日遭遇しました。
displayをblockにしたあとにbackground-imageのurlのパスにタイムスタンプをつけることによって解決しました。
この方法では、レンダリングが2回走ることになり、サイズの大きなgifアニメだと一瞬消えてしまうので注意が必要です。

JavaScript

$(".gif").fadeIn(function() {
    var $this = $(this);
    
    $this.css({
        backgroundImage: $this.css("background-image").replace(/\)/, "?date=" + (new Date() - 0) + ")")
    });
});

DEMO