Home » Jquery » jquery – How do I make a gif to animate in IE after it was hidden?

jquery – How do I make a gif to animate in IE after it was hidden?

Posted by: admin February 22, 2020 Leave a comment

Questions:

I want to show a gif in IE and is not animating. First I added to it the hide class(display: none)
and then I am showing it with .show() method from jquery.
The problem is that the gif is not animating, but if is visible when I first open the page then it works.
I couldn’t find I way to make it work for my case.

Code:

<img src="~/Content/images/circular-loading.gif" id="loginLoadingGif" class="hide" />

$('#loginLoadingGif').show();
How to&Answer:

Please refer to the following code, it uses the .loader div to display the loading image, and use the CSS visibility property to show and hide the loading image (you could change it to CSS display property, and use “none” and “block” value to hide/show the image):

<style type="text/css">
    .contents{
      visibility:hidden;
    }
    .loader {
      border: 16px solid #f3f3f3;
      border-radius: 50%;
      border-top: 16px solid blue;
      border-right: 16px solid green;
      border-bottom: 16px solid red;
      border-left: 16px solid pink;
      width: 120px;
      height: 120px;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
    }

    @-webkit-keyframes spin {
      0% { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
</style>

<script type="text/javascript">
    document.onreadystatechange = function () {
        var state = document.readyState
        if (state == 'interactive') {
            document.getElementById('contents').style.visibility = "hidden";
        } else if (state == 'complete') {
            setTimeout(function () {
                document.getElementById('interactive');
                document.getElementById('load').style.visibility = "hidden";
                document.getElementById('contents').style.visibility = "visible";
            }, 2000);
        }
    }

    function LoadImage(){
         document.getElementById('load').style.visibility = "visible";
         setTimeout(function () {
                document.getElementById('interactive');
                document.getElementById('load').style.visibility = "hidden";
                document.getElementById('contents').style.visibility = "visible";
            }, 3000);
    }
</script>

<form id="form1" runat="server">
    <div id="load" class="loader"></div>
    <div id="contents" class="contents">
        This is testing
    </div>
    <input type="button" id="btnShow" value="Show Loader" onClick="LoadImage();">
</form>

The output as below (when page loads, it will display the loading image, after page load, if we click the Show Loader button, it will show the loading image and after 3 second, it will hide the image):

enter image description here

Reference:

How TO – CSS Loader

Display (Show) Loading Progress GIF Image when Page Loads in ASP.Net MVC