CODEWITHSUNDEEP
javascriptinternet-explorer
user1022772
user1022772

Reputation: 651

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

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.

Upvotes: 4

Views: 663

Answers (2)

dmarra
dmarra

Reputation: 863

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.

Upvotes: 1

frenchie
frenchie

Reputation: 51927

You mean something like this?

$(function() {

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

        setTimeout(function () {

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

        }, 100);

    });
});

Upvotes: 2

Related Questions