Problem showing loader GIF in Internet Explorer

Question

I'm trying to show a loader gif, on a jquery dialog(with no title bar of course) after a user clicks submit on a form.

After doing a couple of thing I came up with this: demo ,and said to myself "Finally! Success!", but when I tested it on IE (I usually use Chrome),much to my disappointment, the animation (loader.gif) didn't seem to be that animated, I mean it looked like a static image and I don't know why it works so fine in FF, Chrome and safary and it simply doesn't work in IE.

I know that gif works wonders on the jsfiddle , even If you use IE, but for some reason when I do the same on my project it doesn't :(

PS:I have no problem if you have another way of doing the same thing, as long as it also works in IE

Hope you can help me out with this.

Have you checked this out yet — http://stackoverflow.com/questions/780560/animated-gif-in-ie-stopping? — polarblau, Jan 22 '11 at 22:49
@polarblau-Thanks , I tried what is suggested here http://stackoverflow.com/questions/780560/animated-gif-in-ie-stopping , but the gif still doesn't work :( — , Jan 23 '11 at 01:41
**The gif is frozen cause IE6, IE7 and IE 8 are buggy.** Don't know about IE9 yet, but I know for sure **on all other browsers the gif does NOT freeze**. Read this for the [correct answer](http://stackoverflow.com/a/780617/260080) and for [some possibile workarounds](http://stackoverflow.com/a/7151504/260080). — Marco Demaio, Feb 04 '12 at 13:15

EbbnFlow · Answer 1 · 2011-07-25T17:41:47.650

Ok Here is how I got around it. It seems to be dependent on the time the overlay is added to the document.

Explanations: If the image is added to chrome and FF's DOM during onclick it won't show my wait GIF... but it will show up in IE. I'm not sure as to why it shows up in IE and not ff or chrome. It could have something to do with the fact that it's added to the DOM on the fly just before a postback.

If the image is added to the DOM at page load time and just slid off the screen, I can simply move it to the proper place just before postback and it will work in FF and chrome but not in IE. IE stops the GIF from animating when doing it this way.

Works in IE

function IeWaitOverlayObj() {

    var _waitoverlay = null;
    var _waitImage = null;
    var _isHidden = true;
    this.showOverlay = function() {
        if (!_waitoverlay) {
            _waitoverlay =
                $('<div></div>')
                    .css({
                        zIndex: '9998',
                        backgroundColor: '#000000',
                        width: $(window).width(),
                        height: $(window).height(),
                        top: '0px',
                        left: '0px',
                        position: 'absolute',
                        opacity: '0.5'
                    });
            var tag = '<img alt="pleaseWait" src="../Images/wait.gif" />';
            _waitImage = $(tag).css({
                zIndex: '9999',
                position: 'absolute',
                top: $(window).height() / 2 - 75,
                left: $(window).width() / 2 - 200,
                width: '400px',
                height: '150px'
            });

            $('body').append(_waitoverlay);
            $('body').append(_waitImage);
            _isHidden = false;
        }
    };
    this.hideOverlay = function() {
        _waitoverlay.hide();
        _isHidden = true;
    };
    this.OnWindowResize = function() {
        if (!_isHidden) {
            _waitoverlay.css({
                width: $(window).width(),
                height: $(window).height()
            });
            _waitImage.css({
                top: $(window).height() / 2 - 75,
                left: $(window).width() / 2 - 200
            });
        }
    }
}

Works in Chrome and FF

function WaitOverlayObj() {
    var _waitoverlay = $('<div></div>');
    var _waitImage = $('<img alt="pleaseWait" src="../Images/wait.gif" />');
    var _isHidden = true;

    $('body').append(_waitoverlay);
    $('body').append(_waitImage);

    _waitoverlay.css({
        zIndex: '9998',
        backgroundColor: '#000000',
        width: $(window).width(),
        height: $(window).height(),
        top: '0px',
        left: $(window).width() * -1,
        position: 'absolute',
        opacity: '0.5'
    });
    _waitImage.css({
        zIndex: '9999',
        position: 'absolute',
        top: '0px', 
        left: '-400px',
        width: '400px',
        height: '150px'
    });

    this.showOverlay = function() {
        _waitImage.css({ top: $(window).height() / 2 - 75, left: $(window).width() / 2 - 200 });
        _waitoverlay.css({ top: '0px', left: '0px' });
        _isHidden = false;
    };
    this.hideOverlay = function() {
        _waitImage.css({ top: '0px', left: '-400px' });
        _waitoverlay.css({ top: '0px', left: $(window).width() * -1 });
        _isHidden = true;
    };

    this.OnWindowResize = function() {
        if (!_isHidden) {
            _waitoverlay.css({
                width: $(window).width(),
                height: $(window).height()
            });
            _waitImage.css({
                top: $(window).height() / 2 - 75,
                left: $(window).width() / 2 - 200
            });
        }
    }
}

And in my Document.Ready

if (navigator.appName == "Microsoft Internet Explorer") {
    wait = new IeWaitOverlayObj();
}
else{
    wait = new WaitOverlayObj();
}

@EbbnFlow- Is that it?? Or it is necessary to do anything else? I ask this because I did as you said, but nothing happens, do you think you could possibly put up a jsfiddle? — , Aug 27 '11 at 23:48
The only part I left out was actually calling the overlay function. In your click event handler, call: wait.showOverlay() — EbbnFlow, Aug 28 '11 at 18:31

score 0 · Answer 2 · answered Dec 03 '13 at 14:49

0

Base64-encode the image into your CSS. IE8 continues to animate it then.

answered Dec 03 '13 at 14:49

Mark

1,009
1
9
8

score -3 · Answer 3 · answered Jan 24 '11 at 10:28

-3

window.onbeforeunload = function() { jQuery("img").attr("src", "image.gif") }; should work. I didn't check it now but the idea is the same I successfully used sometime ago

answered Jan 24 '11 at 10:28

Sergej Andrejev

9,091
11
71
108

@Sergej-Thanks, I tried that, but the problem is still there. Could you please take a look at this http://jsfiddle.net/edaloicaro18/K2tv4/35/ and see if I'm doing something wrong? – Jan 24 '11 at 15:32
2

This solution has been tested over and over again and proved no to work. Wrong answer. – Jonathan Feb 21 '11 at 12:11

Problem showing loader GIF in Internet Explorer

3 Answers3

Linked