加載GIF在Safari中提交表單時停止動畫

看看這個簡單的JSFiddle（忽略所有的javascript代碼，這裏只是關於加載動畫的GIF）。加載GIF在Safari中提交表單時停止動畫

我想在表單提交之前顯示動畫加載GIF。

我嘗試這樣做：

setTimeout(function(){ 
$('form[name="checkout-form"]').submit(); 
},1000);

這工作得很好，動畫加載GIF出現1秒，但是，只要提交請求已發送停止動畫。

我有什麼，以便再次讓動畫，直到頁面加載的GIF做（或直至響應來自頁後退？）

來源

2015-10-02 basZero

我曾與移動Safari瀏覽器類似的問題可以被刪除。解決方案是提供加載指示器作爲data-uri，base64 background-image。詳情請參閱：https：//css-tricks.com/data-uris/。 – zvona

您需要AJAX的形式。當您提交表單時，頁面和動畫將被卸載。

所以儘量

$(function() { 
    $('form[name="checkout-form"]').on("submit",function(e) { 
    e.preventDefault(); // stop the actual submission 
    $("#animationgif").attr("src","submitting.gif?rnd="+new Date().getTime()).show();  
    $.post(this.action,$(this).serialize(),function() { 
     $("#animationgif").attr("src","blank.gif").hide();  
    }); 
    }); 
});

的?rnd="+new Date().getTime()是，以確保它從一開始就開始，如果它是一個循環的AJAX活動指示器

來源

2015-10-02 12:53:44 mplungjan

謝謝，我會試試看...這是否符合Safari/Firefox/Chrome/IE的兼容性？ – basZero

我會這樣認爲的。您可能需要添加一個？rnd =「+ new Date（）。getTime（），以使動畫在IE – mplungjan

@basZero中播放：爲您工作嗎？我發現自己處於類似的困境中，幾乎所有選項已經用完了 –

加載GIF在Safari中提交表單時停止動畫

回答

相關問題