CODEWITHSUNDEEP
cssinternet-exploreranimated-gif
Pete
Pete

Reputation: 58462

Is there a way to detect if ie has animation disabled

I have an animated gif that works perfectly in all browsers except ie (surprise, surprise). After much searching I have found the gif is not animated in ie due to a setting in the options:

Settings -> Advanced settings -> Multimedia -> Play animations in webpages

Is there any way to detect if this is enabled as I would like to display something else instead of a static loading gif, or is there a way to force ie to play the animation?

In case there is a workaround, here is the code I use to show my loader and the type of gif I am using:

#loading {
  background:url(http://preloaders.net/preloaders/712/Floating%20rays.gif) center center no-repeat;
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  top:0;
}
<div id="loading"></div>

Upvotes: 1

Views: 250

Answers (2)

Pete
Pete

Reputation: 58462

Hmmm, seems a bit dirty but what the hell, punish the stupid ie users...

As a workaround, I did a mixture of Prajwal and lonut's answers - adding an ie class to my loader I then saved out each part of the animated gif and then used the following js to give me an animated loader for ie:

var ieLoadingCount = 1,
    ieLoadingInt;

function addLoading() {
    var loading = $('#paving-designer-loading');

    if (loading.hasClass('ie')) {  // only do this for ie
        clearInterval(ieLoadingInt);  // need to clear interval as this is a multi-step form and addLoading may be called multiple times
        ieLoadingInt = setInterval(function () { animateIELoading(loading, true); }, 175);  // preload images
    }
}

function animateIELoading(loading, firstRun) {
    loading.css('background-image', 'url(' + baseUrl + 'images/presentation/toolbox/pavingdesigner/loading/' + ieLoadingCount + '.png)');
    
    if (ieLoadingCount == 12) {  // loading gif had 12 parts in it
        ieLoadingCount = 1;
        if (firstRun) {
            clearInterval(ieLoadingInt);  // finish preload
            ieLoadingInt = null;
        }
    } else {
        ieLoadingCount++;
    }
}

function showLoading(loading) {
    if (loading.hasClass('ie')) {
        clearInterval(ieLoadingInt);
        ieLoadingInt = setInterval(function () { animateIELoading(loading, false); }, 175);
    }

    loading.show();
}

function hideLoading(loading) {
    loading.hide();

    if (loading.hasClass('ie')) {
        clearInterval(ieLoadingInt);
    }
}

I'll leave this open in case anyone can find a way to check if the animation is allowed in the first place as currently I apply this for all ie users regardless of if the animation is allowed or not. Would be good to only apply it to the browsers that have their animations turned off.

Upvotes: 0

Prajwal Shrestha
Prajwal Shrestha

Reputation: 553

You can use root class from body which shows only IE browser then write like as below in your css:

.rootclassname #loading {
background : //use static image here
}

Upvotes: 1

Related Questions