How to show animated loading gif image in Internet Explorer using Javascript?

Posted by on in PHP

Usually when a form submits it takes sometime to process the data and then return the response back to the screen. The duration of time varies according to the internet speed and system configuration of the end user using the website.
If it takes

more time than the usual time, the end user might think of something wrong with the input or the website and there are chances the user may leave the site. It might affects your business.
In such scenario, you need a loading animated GIF image.
Now one would say whats difficult in it. I will place a gif image and it will solve the problem. Yes this will solve the problem in most of the browsers like Mozilla Firefox, Google Chrome. But Microsoft Internet Explorer will not show the animated GIF image. Instead it shows a static image.

So I tried myself and found a CSS trick which will make it happen for all the browsers. Lets try it out.

Suppose one wants to show the loading Gif image on the form submit.

In the script tag write the

following code :

  document.registerform.submit(); // registerform is the name of the form
  document.getElementById("gif_block").style.display="block"; //gif_block is the id of the div outside the image
  document.getElementById('regform').style.display ='none';
Animated loading gif image

Loading Image

In your HTML after the form ends write the following lines of HTML :

/* Animated image not showing in Internt Explorer */

If you execute the above code, loading GIF image will display after clicking the form submit button. But this will not show the animated loading gif image in internet explorer.
This is caused by the fact that the element was invisible when it was added to the DOM. Afterwards when you show the element IE does not start the animation.

To display the animated image in Internet Explorer I changed the HTML. Just place a P tag in between the div and the image. Could you believe, the animated image started to displaying in Internet Explorer.

Here is the updated working code for Internet Explorer :

 

I hope you enjoyed this little trick and implement it when you stuck in the same situation.Rich Text AreaToolbarBold (Ctrl / Alt + Shift + B)Italic (Ctrl / Alt + Shift + I)Strikethrough (Alt + Shift + D)Unordered list (Alt + Shift + U)Ordered list (Alt + Shift + O)Blockquote (Alt + Shift + Q)Align Left (Alt + Shift + L)Align Center (Alt + Shift + C)Align Right (Alt + Shift + R)Insert/edit link (Alt + Shift + A)Unlink (Alt + Shift + S)Insert More Tag (Alt + Shift + T)Proofread WritingToggle fullscreen mode (Alt + Shift + G)Show/Hide Kitchen Sink (Alt + Shift + Z)
FormatFormat▼
UnderlineAlign Full (Alt + Shift + J)Select text color▼
Paste as Plain TextPaste from WordRemove formattingInsert custom characterOutdentIndentUndo (Ctrl + Z)Redo (Ctrl + Y)Help (Alt + Shift + H)

Usually when a form submits it takes sometime to process the data and then return the response back to the screen. The duration of time varies according to the internet speed and system configuration of the end user using the website.
If it takes more time than the usual time, the end user might think of something wrong with the input or the website and there are chances the user may leave the site. It might affects your business.
In such scenario, you need a loading animated GIF image.
Now one would say whats difficult in it. I will place a gif image and it will solve the problem. Yes this will solve the problem in most of the browsers like Mozilla Firefox, Google Chrome. But Microsoft Internet Explorer will not show the animated GIF image. Instead it shows a static image.
So I tried myself and found a CSS trick which will make it happen for all the browsers. Lets try it out.
Suppose one wants to show the loading Gif image on the form submit.
In the script tag write the following code :
document.registerform.submit(); // registerform is the name of the form
document.getElementById(“gif_block”).style.display=”block”; //gif_block is the id of the div outside the image
document.getElementById(‘regform’).style.display =’none’;

Loading ImageIn your HTML after the form ends write the following lines of HTML :
/* Animated image not showing in Internt Explorer */

If you execute the above code, loading GIF image will display after clicking the form submit button. But this will not show the animated loading gif image in internet explorer.
This is caused by the fact that the element was invisible when it was added to the DOM. Afterwards when you show the element IE does not start the animation.
To display the animated image in Internet Explorer I changed the HTML. Just place a P tag in between the div and the image. Could you believe, the animated image started to displaying in Internet Explorer.
Here is the updated working code for Internet Explorer :
I hope you enjoyed this little trick and implement it when you stuck in the same situation.
Path:

You would also like:

About Sam

Web Developer by Profession, Human by Nature, Blogger by Passion. More than 5 years of experience in PHP, JQuery, Drupal, Cake PHP, HTML, CSS and Javascript. You can follow me on Twitter and also on Digg. Also you can email me at sam@codeinsects.com.

Comments

  1. By Jefferey Mayton on

    My husband and i ended up being now joyful Louis could round up his reports because of the precious recommendations he gained out of the web site. It’s not at all simplistic to just happen to be giving away guides which usually some others might have been trying to sell. We really know we need you to give thanks to because of that. The main illustrations you made, the easy site menu, the friendships you aid to foster – it’s mostly remarkable, and it is aiding our son in addition to our family do think the situation is satisfying, and that is quite vital. Many thanks for the whole lot!

    Reply
  2. By Steve on

    I have to say, while looking through hundreds of blogs daily, the theme of this blog is different (for all the proper reasons). If you do not mind me asking, what’s the name of this theme or would it be a especially designed affair? It’s significantly better compared to the themes I use for some of my blogs.

    Reply
  3. By Eyre on

    Very well written post. It will be valuable to anybody who utilizes it, as well as myself. Keep doing what you are doing – for sure i will check out more posts.

    Reply
  4. By ebook reader on

    I was recommended this website by means of my cousin. I’m now not sure whether this submit is written by him as no one else realize such targeted approximately my trouble. You are wonderful! Thanks!

    Reply
  5. By julio on

    Te agradezco este articulo es de los pocos que he encontrado que me ha parecido informativo

    Translated to English:
    I appreciate this article one of the few I’ve found that I found informative

    Reply
  6. By Courte on

    I discovered your internet site on reddit in addition to thought i’d can be found in and have a appear. fascinating idea you have however i’ll possess a handful of other folks y you’ve got an interest. they can assist or perhaps might not however its really worth a chance.

    Reply
  7. By Ajax loaders on

    very interesting approach to display those :) most scripts shown in the web nowadays use JQuery for this purpose, finally found one with simple javascript syntax. Thanks for sharing :)

    Reply
  8. Pingback: Sifisdndsk

  9. By Madhav on

    Hi
    I am using the loading image befor calling a URL
    like
    mywindow.documnet.write(“<img src='xxx.gif'");
    mywindow.documnet.open('URL','','');

    The image is displayed before loading the url, but the image animation is not working
    can any one help me on this

    Reply
    1. By Ghan on

      Hello,

      If you are placing gif animation image using javascript, It will not animate. You can do onething put div in document using standrad html like <div id=”abc”><img src=”xxx.gif” /></div> and then use javascript like this mywindow.document.getElementById(“abc”).style.display=”block”;
      mywindow.documetn.getElementById(“abc”).style.visibility=”hidden”;
      mywindow.document.open(‘URL’,”,”);

      It will work surely.

      If you face any problem You can reply to this comment

      Reply
  10. By Deepak on

    Its hiding the Image completely nothing is displaying at all, if you have any solution then please help.

    Reply
  11. By Deepak on

    Belowis my code to :
    $.blockUI({ message: $(‘#throbber’),showOverlay: true,overlayCSS: { backgroundColor: ‘#fff’ },css:{ top: ($(window).height() – 50) /2 + ‘px’, left: ($(window).width() – 50) /2 + ‘px’, width: ’50px’, height: ’50px’, border: ‘none’, padding: ’25px’,backgroundColor: ”, opacity: 1, color: ‘#ffffff’ }});

    document.getElementById(“abc”).style.display=”block”;
    documetn.getElementById(“abc”).style.visibility=”hidden”;

    Where ‘throbber’ is the id of div where i’m giving source path of image, you can take it as above example div.

    its hiding Image completely. this problem is only in IE .
    please help.

    Reply
  12. By Ghan on

    Hello

    Try to change these lines :
    document.getElementById(“abc”).style.display=”block”;
    documetn.getElementById(“abc”).style.visibility=”hidden”
    To
    document.getElementById(“abc”).style.display=”block”;
    documetn.getElementById(“abc”).style.visibility=”visible”

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>