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

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:

Comments
  1. Amado
  2. Jefferey Mayton
  3. Steve
  4. Barbie
  5. Eyre
  6. ebook reader
  7. julio
  8. Kelsey
  9. Courte
  10. Ajax loaders
  11. ravi
  12. Madhav
    • Ghan
  13. Deepak
  14. Deepak
  15. Deepak
  16. Ghan

Leave a Reply

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


*