Internet ExplorerでローダーGIFを表示する際の問題

Question

ユーザーがフォーム上でサブミットをクリックした後に、jqueryダイアログ（もちろんタイトルバーなし）にloader gifを表示しようとしています。

demoと私はこれを思いついて、「最後に成功！」と言いましたが、私はIEでテストしましたが（通常はChromeを使用しています）、私の失望、アニメーション（loader.gif）はアニメーション化されていないようですが、静的な画像のように見えますが、なぜFF、Chrome、Safariでうまく動作するのか分かりません。IEでは動作しません。

私はあなたがIEを使用している場合でも、gif形式はjsfiddleに驚異を働かせることを知っているが、私は私のプロジェクトで同じことを行う何らかの理由でそれが

PSを:(ません。あなたならば、私は何の問題もありません同じことを行うための別の方法を持っている限り、それはまた、IE

に働くよう、あなたがこれで私を助けることができると思います。

Answer 1

window.onbeforeunload = function() { jQuery("img").attr("src", "image.gif") };が動作するはずです。私は今それをチェックしませんでしたが、アイデアがあります私はいつか前に正常に使用しました

Answer 2

私はどうやってそれを取りましたか？オーバーレイがドキュメントに追加される時間に依存するようです。

説明： 画像がchromeとFFのDOMにonclickの間に追加された場合、私の待っているGIFは表示されませんが、IEに表示されます。私はそれがなぜIEで現れ、ffやクロムではないのか分からない。ポストバックの直前に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

であなたのCSSに画像をBase64でエンコードします。 IE8はこれをアニメーション化し続けています。