how to delay call to JS function - animated gif not working in IE

4
votes

I'm struggling to get an animated gif to run in IE. Works in all other browsers, but in IE it just freezes. I've researched this and looks like a delay using setTimeout might work. Not too sure how I add this to the following function:

<script type="text/javascript">

    $(function(){
        $('#photo_form').on("submit", function () {
        $('#loading').show();

    });

    });


</script>

The gif is inside a div called 'loading' which is hidden. Would I add the timeout to onClick of the button or within the function itself?

Why does IE make things so difficult!?

Any help with solving this problem would be very helpful.

2
javascriptinternet-explorer
Submit unloads the page. You would have to target the form to an iframe or use Ajax to have an animation running. If you use Ajax, you need to cancel the submit event - mplungjan
Perhaps call e.PreventDefault beforehand and then show the div, then submit the form using the HTMLFormElement's submit method. - Austin

2 Answers

2
votes

You mean something like this?

$(function() {

    $('#photo_form').on("submit", function () {

        setTimeout(function () {

              $('#loading').show();

        }, 100);

    });
});
1
votes

Try this curde, untested psedo-code:

var startTime;
var thread;

$(function(){
        $('#photo_form').on("submit", function () {
        $('#loading').show();
    startTime = time();
    thread = setInterval("showLoadingGif", 1);

    });

function showLoadingGif() {
    var timeToWait = 5; //change interval as needed
    if(timeToWait + startTime <= currentTime) {
        //show the gif
        clearInterval(thread);
    }
}

It's been a long time since I've worked with javascript, so this almost certainly needs adjustment; but the principle is the same: keep calling that function, and let that function decide when to stop being called.

setTimeout() will cause your page to freeze while you wait. setInterval will run your code asyncronously.