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';
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:
This can be a thing I need to find more information about, appreciate the blog post.
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!
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.
Yup, that’ll do it. You have my appreciation.
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.
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!
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
Good post. Its realy nice. Many information help me.
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.
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 
Pingback: Sifisdndsk
Display a Simple Loading Message and Animated Loading Gif Using JavaScript on
bit.ly/vlQhKu
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
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
I tried it but it is not working with jquery library “blockUI.js”.
Its hiding the Image completely nothing is displaying at all, if you have any solution then please help.
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.
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”