2011-02-04 61 views
1

ここに問題があります。私は「ローディング」イメージを持っています。これは通常、何かが舞台裏で起こっていることを示すために使用される標準的なspinner.gifアニメーションです。ここでは、コードがあります:完全に他の機能の後ページをリフレッシュした後に画像が表示されない

$(document).ready(function() { 
     var spinner = $('<img />').attr('src', '/media/images/icons/spinner.gif'); 
     var loadingText = $('<span id="loader">Loading...</span>').prepend(spinner); 
     $(loadingText).appendTo('#messages'); 

[... other jquery code here ...] 

、以下のロードイメージとテキストを削除します。

 $(loadingText).remove(); 

問題は、あなたがあなたのブラウザで「リフレッシュ」をクリックすると、負荷のテキストが表示されていることですもう一度、そうするべきですが、イメージは表示されません。タブまたはウィンドウを閉じてページを再度開くと、読み込み中のテキストとともに画像が正しく表示されます。私は困惑しています、どんなアイデアですか? (ありがとうございます)

答えて

1

Chrome、Firefox、Operaでうまく動作するようです(Macではごめんなさい、IEはありません)。複数のブラウザで試してみましたか?

私はやっています:

<html> 
<body> 
    <div id="messages"> 

    </div> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
    <script type="text/javascript"> 
    jQuery(document).ready(function($) { 
     // use some random spinner from the internet 
     var spinner = $('<img />').attr('src', 'http://www.enilivewec.com/img/ajax-loading.gif'); 
     var loadingText = $('<span id="loader">Loading...</span>').prepend(spinner); 

     // add to #messages div block 
     $(loadingText).appendTo('#messages'); 

     // do some animations to delay it a bit then remove it 
     $('#messages').slideUp(500).slideDown(1000).fadeOut(500).fadeIn(1000, function() { 
      $(loadingText).remove(); 
     }); 

    }) 
    </script> 
</body> 


編集:ザ・OPはそれがすべてのイメージがロードされた後になるまで待機した後、jQueryのコードを開始しますので、using window loadが問題を修正することを述べました。

+0

私はいくつかの異なるブラウザを試しました...運がない。 – musashiXXX

+0

コードまたはコードを試しましたか?バグに関しては、無関係なアイテムを排除するために可能な最も簡単なテストケースを作成しようと常にしてください。あなたが私のコードを試して、それがうまくいくなら、何かがあなたと釣り合っています。 – iwasrobbed

+0

ええ、奇妙なことは、あなたのコードと私の両方をFirefoxの最新バージョンで試してみたところ、うまくいきます。しかたがない;私がそれを見つけたら、私は解決策を投稿します:-)ありがとう! – musashiXXX

関連する問題