iOS の Mobile Safari で 画面遷移時にローディングをいれる

DEMO

http://jsrun.it/kimmy/4dhL

JavaScript

(function(win, doc) {

    "use strict";
    
    doc.querySelector(".btn").addEventListener("click", function(evt) {
        var that = this;
        evt.preventDefault();
        doc.querySelector(".loading").classList.add("on"); // gifアニメ表示
        setTimeout(function() {
            location.href = that.getAttribute("href") + "?" + Date.now(); // ページ遷移
        }, 0);
    }, false);
    
})(this, document);

こんな感じのコードでページ遷移するまでにgifアニを表示しようとしたのですが、iOS の Mobile Safari ではうまくいきませんでした。
次のページの読み込みがはじまると同時に、現在ページの処理が止まってしまうようです。

PC、Androidではほぼ想定通りの挙動を見せ、iOSのChromeでもちょっとだけgifアニが動きました。

対策

(function(win, doc) {

    "use strict";
    
    doc.querySelector(".btn").addEventListener("click", function(evt) {
        var that = this;
        evt.preventDefault();
        doc.querySelector(".loading").classList.add("on"); // gifアニメ表示
        setTimeout(function() {
            location.href = that.getAttribute("href") + "?" + Date.now(); // ページ遷移
        }, 500); // 0.5秒間はgifアニが動く
    }, false);
    
})(this, document);

あまり意味が無いような気がしますが、0.5秒だけgifアニが動くようになりました。