Проблема, показывающая загрузчик GIF в Internet Explorer

Question

Я пытаюсь показать loader gif в диалоговом окне jquery (без заголовка), после того как пользователь нажмет на форму.

После того, как я сделал пару вещей, я придумал это: demo и сказал себе «Наконец-то! Успех!», Но когда я протестировал его на IE (обычно я использую Chrome), к моему разочарованию, анимация (loader.gif), похоже, не был таким анимированным, я имею в виду, что он похож на статический образ, и я не знаю, почему он работает так хорошо в FF, Chrome и в сафари, и он просто не работает в IE.

Я знаю, что GIF творит чудеса на jsfiddle, даже если вы используете IE, но по какой-то причине, когда я делаю то же самое на моем проекте не :(

PS: У меня нет никаких проблем, если вы есть еще один способ сделать то же самое, до тех пор, как он работает в IE

Надеется, что вы можете помочь мне с этим.

Answer 1

window.onbeforeunload = function() { jQuery("img").attr("src", "image.gif") }; должен работать. Я не проверял это сейчас, но идея является тот же, который я успешно использовал когда-то раньше

Answer 2

Ok Здесь i как я обошел это. Кажется, что он зависит от времени добавления оверлея в документ.

Пояснения: Если изображение добавлено в chrome и DOM DOM во время onclick, он не покажет мой GIF-файл ожидания ... но он появится в IE. Я не уверен, почему он появляется в IE, а не ff или chrome. Это может иметь какое-то отношение к тому факту, что он добавлен в DOM на лету перед отправкой.

Если изображение добавлено в DOM при загрузке страницы и просто соскользнет с экрана, я могу просто переместить его в нужное место непосредственно перед обратной передачей, и он будет работать в FF и chrome, но не в IE. IE останавливает GIF от анимации, когда делает это таким образом.

Работает в IE

function IeWaitOverlayObj() { 

    var _waitoverlay = null; 
    var _waitImage = null; 
    var _isHidden = true; 
    this.showOverlay = function() { 
     if (!_waitoverlay) { 
      _waitoverlay = 
       $('<div></div>') 
        .css({ 
         zIndex: '9998', 
         backgroundColor: '#000000', 
         width: $(window).width(), 
         height: $(window).height(), 
         top: '0px', 
         left: '0px', 
         position: 'absolute', 
         opacity: '0.5' 
        }); 
      var tag = '<img alt="pleaseWait" src="../Images/wait.gif" />'; 
      _waitImage = $(tag).css({ 
       zIndex: '9999', 
       position: 'absolute', 
       top: $(window).height()/2 - 75, 
       left: $(window).width()/2 - 200, 
       width: '400px', 
       height: '150px' 
      }); 

      $('body').append(_waitoverlay); 
      $('body').append(_waitImage); 
      _isHidden = false; 
     } 
    }; 
    this.hideOverlay = function() { 
     _waitoverlay.hide(); 
     _isHidden = true; 
    }; 
    this.OnWindowResize = function() { 
     if (!_isHidden) { 
      _waitoverlay.css({ 
       width: $(window).width(), 
       height: $(window).height() 
      }); 
      _waitImage.css({ 
       top: $(window).height()/2 - 75, 
       left: $(window).width()/2 - 200 
      }); 
     } 
    } 
} 

Работает в Chrome и FF

function WaitOverlayObj() { 
    var _waitoverlay = $('<div></div>'); 
    var _waitImage = $('<img alt="pleaseWait" src="../Images/wait.gif" />'); 
    var _isHidden = true; 

    $('body').append(_waitoverlay); 
    $('body').append(_waitImage); 

    _waitoverlay.css({ 
     zIndex: '9998', 
     backgroundColor: '#000000', 
     width: $(window).width(), 
     height: $(window).height(), 
     top: '0px', 
     left: $(window).width() * -1, 
     position: 'absolute', 
     opacity: '0.5' 
    }); 
    _waitImage.css({ 
     zIndex: '9999', 
     position: 'absolute', 
     top: '0px', 
     left: '-400px', 
     width: '400px', 
     height: '150px' 
    }); 

    this.showOverlay = function() { 
     _waitImage.css({ top: $(window).height()/2 - 75, left: $(window).width()/2 - 200 }); 
     _waitoverlay.css({ top: '0px', left: '0px' }); 
     _isHidden = false; 
    }; 
    this.hideOverlay = function() { 
     _waitImage.css({ top: '0px', left: '-400px' }); 
     _waitoverlay.css({ top: '0px', left: $(window).width() * -1 }); 
     _isHidden = true; 
    }; 

    this.OnWindowResize = function() { 
     if (!_isHidden) { 
      _waitoverlay.css({ 
       width: $(window).width(), 
       height: $(window).height() 
      }); 
      _waitImage.css({ 
       top: $(window).height()/2 - 75, 
       left: $(window).width()/2 - 200 
      }); 
     } 
    } 
} 

И в моем document.ready

if (navigator.appName == "Microsoft Internet Explorer") { 
    wait = new IeWaitOverlayObj(); 
} 
else{ 
    wait = new WaitOverlayObj(); 
} 

Answer 3

Base64-кодирования изображения в ваш CSS. IE8 продолжает анимировать его.