PrimeFaces File Download Status and IE (animated GIFs)

You might have notice that IE browsers will not animate a gif if they are loaded hidden.

I first saw this when making use of the PrimeFaces file download dialog. I wanted a status gif in a dialog. Worked fine on all browsers except IE of course.. here is a quick work around.

        <p:dialog modal="true" widgetVar="statusDialog" header="Status" draggable="false" closable="false" resizable="false"> 
             <div id="progressBar">
                <p:graphicImage value="/img/ajaxloadingbar.gif" /> 
           </div> 
        </p:dialog> 
 
        <h:form>
           
            <h:messages globalOnly="true" styleClass="error"/>

        <script type="text/javascript"> 
            function start() { 
                statusDialog.show();
              //hack to avoid annimated gifs not annimating in IE Browsers
                var isIE = /*@cc_on!@*/false;
                   if(isIE){
                    var pb = document.getElementById("progressBar");
                    pb.innerHTML = '<img src="/img/ajaxloadingbar.gif"/>';
                } 
            } 
             
            function stop() { 
                statusDialog.hide(); 
            } 
        </script>
            <div class="buttons">

               
                <p:commandLink id="downloadLink" type="submit" styleClass="btn btn-primary"
                        actionListener="#{foo.downloadAction()}"
                        value="Generate Report" ajax="false"
                        onclick="PrimeFaces.monitorDownload(start, stop)"  
                        icon="ui-icon-arrowthichk-s" >

                    <p:fileDownload value="#{foo.downloadContentProperty}" /> 
                </p:commandLink>