为某些移动设备/浏览器提交表单后 Gif 未加载

Question

After my HTML form is submitted, it takes a while for all the data to process and for the user to be redirected to the new page where the output will be shown. After the form is submitted, I want to hide it and then display a processing gif until the user is redirected.

My code works for Chrome on the computer. But for mobile browsers, all the code in displayProcessingGif() runs except for the first line, which is supposed to make the gif show up. For Safari on the computer, none of the code in displayProcessingGif() runs.

Any help would be greatly appreciated.

<script type="text/javascript">
    function displayProcessingGif(){
        document.getElementById("processingGif").innerHTML='<img src="examplewebsite.com/examplegif.gif">';
        document.getElementById("myForm").style.display="none";
    }
</script>

<form method="POST" id="myForm">
    //different form contents
    <input type="submit" value="Submit!" name="submit" onclick="displayProcessingGif();">
</form>

<div id="processingGif">
    <img src="">
</div>

Answer 1

Changing innerhtml has its own problems. Why don't you rather change image src ?

<script type="text/javascript">
    function displayProcessingGif(){
        document.getElementById("processingImg").src='examplewebsite.com/examplegif.gif';
        document.getElementById("myForm").style.display="none";
    }
</script>

<div id="processingGif">
    <img src="" id="processingImg">
</div>