Animated GIF in IE stopping

Question

Does anyone know a work around to make animated GIF s continue to be animated after you click a link or submit a form on the page your on in IE  This works fine in other browsers   Thanks

User · Answer

Here s what I did  All you have to to is to break up your GIF to say 10 images  in this case i started with 01 gif and ended with 10 gif  and specify the directory where you keep them   HTML    lt div id  tester  gt  lt  div gt    JavaScript   function pad2 number           return  number  lt  10    0          number    var      dirURL    path to your images folder       ajaxLoader   document createElement  img    ajaxLoader className    ajax-image-loader   jQuery document  ready function        jQuery   tester   append ajaxLoader       set 0       function set i        if  i  gt  10  i   1          img src   dirURL   pad2 i      gif       setTimeout function             set   i          100           This method works with IE7  IE8 and IE9  althought for IE9 you could use spin js   NOTE  I have not tested this in IE6 since I have no machine running a browser from the 60s  although the method is so simple it probably works even in IE6 and lower

User · Answer

I realize that this is an old question and that by now the original posters have each found a solution that works for them  but I ran across this issue and found that VML tags do not fall victim to this IE bug   Animated GIFs still move during page unload when placed on the IE browser using VML tags     Notice I detected VML first before making the decision to use VML tags so this is working in FireFox and other browsers using normal animated GIF behavior   Here s how I solved this    lt input class  myExitButton  type  button  value  Click me     gt    lt div class  loadingNextPage  style  display none   gt       lt span style  left -24px  POSITION  relative  WIDTH  48px  DISPLAY  inline-block  HEIGHT  48px  class  spinnerImageVml  gt  lt  xml namespace prefix  rvml  ns    urn schemas-microsoft-com vml    gt  lt rvml group style  POSITION  absolute  WIDTH  48px  HEIGHT  48px  rotation  1deg  class  rvml  coordsize    47 47  gt  lt rvml image style  POSITION  absolute  WIDTH  48px  HEIGHT  48px  TOP  0px  LEFT  0px  class  rvml  src   images loading gray gif  coordsize  21600 21600  gt  lt  rvml image gt  lt  rvml group gt  lt  span gt       lt img class  spinnerImage  src   images loading gray gif  alt  loading       gt       lt div gt Just one moment while we access this information    lt  div gt   lt  div gt    lt script language  javascript  type  text javascript  gt      window LoadProgress    function  progress                var getdialogHeight   function  height                var isIE   navigator userAgent toLowerCase   indexOf  msie    gt  -1              if  isIE                    return height    px                             return height                      var isVmlSupported   function                  var a   document body appendChild document createElement  div                 a innerHTML     lt v shape id  vml flag1  adj  1    gt                var b   a firstChild              b style behavior    url  default VML                var supported   b   typeof b adj     object    true              a parentNode removeChild a               return supported                      var showAnimationDuringPageUnload   function                  if  isVmlSupported                          loadingNextPage  gt   spinnerImage   hide                              else                       loadingNextPage  gt   spinnerImageVml   hide                                      var openLoadingMessage   function                      loadingNextPage   dialog                   modal  true                  closeOnEscape  true                  title   Please wait                      closeText   x                   height  getdialogHeight 200                   buttons                         Close   function                                this  dialog  close                                                                                    myExitButton   click function                  openLoadingMessage                showAnimationDuringPageUnload                window location href    http   www stackoverflow com                         return progress         window LoadProgress        window jQuery    lt  script gt    Naturally  this relies on jQuery  jQueryUI and requires an animated GIF of some type    images loading gray gif

User · Answer

Related to this I had to find a fix where animated gifs were used as a background image to ensure styling was kept to the stylesheet   A similar fix worked for me there too    my script went something like this  I m using jQuery to make it easier to get the computed background style - how to do that without jQuery is a topic for another post    var spinner    lt give me a spinner element gt   window onbeforeunload   function       bg image     spinner  css  background-image      spinner style backgroundImage    none     spinner style backgroundImage   bg image       EDIT  With a bit more testing I ve just realised that this doesn t work with background images in IE8   I ve been trying everything I can think of to get IE8 to render a gif animation wile loading a page  but it doesn t look possible at this time

User · Answer

Jquery       WhereYouWantTheImageToAppear   html   lt img src    Animated gif    gt

User · Answer

IE assumes that the clicking of a link heralds a new navigation where the current page contents will be replaced   As part of the process for perparing for that it halts the code that animates the GIFs   I doubt there is anything you can do about it  unless you aren t actually navigating in which case use return false in the onclick event

User · Answer

Very  very late to answer this one  but I ve just discovered that using a background-image that is encoded as a base64 URI in the CSS  rather than held as a separate image  continues to animate in IE8

User · Answer

Just had a similar issue  These worked perfectly for me       myElement   prepend   lt img src   path to img gif  alt  My Gif  title  Loading    gt          lt img src   path to img gif  alt  My Gif  title  Loading    gt    prependTo   myElement      Another idea was to use jQuery s  load    to load and then prepend the image   Works in IE 7

User · Answer

I had this same problem  common also to other borwsers like Firefox  Finally I discovered that dynamically create an element with animated gif inside at form submit did not animate  so I developed the following workaorund   1  At document ready    each FORM found in page  receive position relative property and then to each one is attached an invisible DIV bg-overlay   2  After this  assuming that each submit value of my website is identified by btn-primary css class  again at document ready    I look for these buttons  traverse to the FORM parent of each one  and at form submit  I fire showOverlayOnFormExecution this true   function  passing clicked button and a boolean that toggle visibility of DIV bg-overlay     document  ready function          Append LOADING image to all forms      form   css  position   relative   append   lt div class  bg-overlay  style  display none   gt  lt img src   images loading gif  gt  lt  div gt          At form submit  fires a specific function      form  btn-primary   closest  form   submit function  e        showOverlayOnFormExecution this true               CSS for DIV bg-overlay is the following    bg-overlay     width 100     height 100     position absolute    top 0    left 0    background rgba 255 255 255 0 6     z-index 100      bg-overlay img     position absolute    left 50     top 50     margin-left -40px    my loading images is 80x80 px  This is done to center it horizontally and vertically    margin-top -40px    max-width auto    max-height 80px      3  At any form submit  the following function is fired to show a semi-white background overlay all over it  that deny ability to interact again with form  and an animated gif inside it  that visually show a loading action    function showOverlayOnFormExecution clicked button  showOrNot         if showOrNot    1                  Add  content  of  bg-overlay container  copying it  to the confrm that contains clicked button            clicked button  closest  form   find   bg-overlay   show              else            form  bg-overlay   hide        Showing animated gif at form submit  instead of appending it at this event  solves  gif animation freeze  problem of various browsers  as said  I found this problem in IE and Firefox  not in Chrome

User · Answer

old question  but posting this for fellow googlers   Spin js DOES WORK for this use case  http   fgnass github com spin js

User · Answer

I came upon this post  and while it has already been answered  felt I should post some information that helped me with this problem specific to IE 10  and might help others arriving at this post with a similar problem   I was baffled how animated gifs were just not displaying in IE 10 and then found this gem  Tools rarr Internet Options rarr Advanced rarr MultiMedia rarr Play animations in webpages  hope this helps

User · Answer

I encountered this problem when trying to show a loading gif while a form submit was processing  It had an added layer of fun in that the same onsubmit had to run a validator to make sure the form was correct  Like everyone else  on every IE gif form post on the internet   I couldn t get the loading spinner to  spin  in IE  and  in my case  validate submit the form   While looking through advice on http   www west-wind com I found a post by ev13wt that suggested the problem was      that IE doesn t render the image as animated cause it was invisible when it was rendered   That made sense  His solution    Leave  blank where the gif would go and use JavaScript to set the source in the onsubmit function - document getElementById  loadingGif   src    path to gif file    Here s how I implemented it    lt script type  text javascript  gt      function validateForm form             if  isNotEmptyid form A                 if  isLen4 form B                             if  isNotEmptydt form C                         if  isNumber form D                                     if  isLen6 form E                                if  isNotEmptynum form F                                     if  isLen5 form G                                        document getElementById  tabs   style display    none                                                       document getElementById  dvloader   style display    block                                                       document getElementById  loadingGif   src     images ajax-loader gif                                        return true                                                                                                                                                                    return false                           lt  script gt    lt form name  payo  action  process  method  post  onsubmit  return validateForm this   gt       lt  -- FORM INPUTS    -- gt       lt input type  submit  name  submit  value   Authorize   gt        lt div style  display none  id  dvloader  gt             lt img id  loadingGif  src    alt  Animated Image that appears during processing of document     gt          Working    this process may take several minutes       lt  div gt    lt  form gt    This worked well for me in all browsers

User · Answer

The accepted solution did not work for me   After some more research I came across this workaround  and it actually does work   Here is the gist of it   function showProgress         var pb   document getElementById  progressBar        pb innerHTML     lt img src    progress-bar gif  width  200  height   40   gt        pb style display           and in your html    lt input type  submit  value  Submit  onclick  showProgress      gt   lt div id  progressBar  style  display  none   gt       lt img src    progress-bar gif  width  200  height   40   gt   lt  div gt    So when the form is submitted  the  lt img  gt  tag is inserted  and for some reason it is not affected by the ie animation issues   Tested in Firefox  ie6  ie7 and ie8

User · Answer

Found this solution at http   timexwebdev blogspot com 2009 11 html-postback-freezes-animated-gifs html and it WORKS   Simply re-load image before setting to visible   Call the following Javascript function from your button s onclick   function showLoader              Reload the image for IE        document getElementById  loader   src    images loader gif            Let s make the image visible        document getElementById  loader   style visibility    visible

User · Answer

A very easy way is to use jQuery and SimpleModal plugin  Then when I need to show my  loading  gif on submit  I do          css  cursor   wait      modal   lt table style  white-space  nowrap  gt  lt tr gt  lt td style  white-space  nowrap  gt  lt b gt Please wait    lt  b gt  lt  td gt  lt td gt  lt img alt  Please wait  src  loader gif    gt  lt  td gt  lt  tr gt  lt  table gt     escClose false

User · Answer

Building on  danfolkes  answer  this worked for me in IE 8 and ASP NET MVC3   In our  Layout cshtml   lt body style  min-width  800px  gt       lt div id  progress  gt           lt div style  min-height  200px  gt           lt  div gt           lt div id  throbber  gt               lt img src        Content ajax-loader gif  alt  Progress  style  display  block                  margin-left  auto  margin-right  auto    gt           lt  div gt       lt  div gt       lt div id  main  gt     lt  lt  lt  content here                         lt script type  text javascript  language  javascript  gt      function ShowThrobber                 main   hide                progress   show               Work around IE bug which freezes gifs         if  navigator appName     Microsoft Internet Explorer                    Work around IE bug which freezes gifs                 throbber   html   lt img src        Content ajax-loader gif  alt  Progress  style  display  block  margin-left  auto  margin-right  auto   gt                 lt  script gt   lt script type  text javascript  language  javascript  gt      function HideThrobber                 main   show                progress   hide           lt  script gt   lt script type  text javascript  language  javascript  gt        document  ready function              HideThrobber             lt  script gt    And in our navigation links    lt input type  submit  value  Finish  class  submit-link  onclick  ShowThrobber     gt    or   Html ActionLink  DoSometthing    MyController   new   Model SomeProperty    new   onclick    ShowThrobber

User · Answer

Here s a jsFiddle that works just fine on form submit with method  post   The spinner is added on form submit event      form   bind  submit   onFormSubmit    function onFormSubmit         setTimeout showSpinner  1      function showSpinner            body   append     lt img id  spinner  src  spinner gif  alt  Spinner    gt          See jsFiddle code here  Test it in your IE browser here

[internet-explorer] Animated GIF in IE stopping

Examples related to internet-explorer

Examples related to gif

Examples related to animated-gif