1

私のページには、次のcssを含むdivがあります。

.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .35 ) 
                url('/NoAuth/cf/ajax-loader.gif')
                50% 50% 
                no-repeat;
}


/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

そして、以下を使用して.ajax呼び出しが行われるときに、本体の「loading」クラスを追加または削除します。

jQuery(document).ready(function () {
    jQuery('body').on({
      ajaxStart: function() {
        jQuery(this).addClass('loading');
      },
      ajaxStop: function() {
        jQuery(this).removeClass('loading');
      }
    });
});

しかし、多くの場合、ajax呼び出し中に背景の色が変わりますが、gifが表示されません。ただし、Firebugコンソールに移動してと入力jQuery('body').addClass('loading')すると、画像が表示されます。また、Firebugの[ネット]タブを見ると、その.addClassコマンドを入力するまでgifが読み込まれなかったことがわかります。

その背景をプリロードして常に表示されるようにするために必要なことはありますか、またはこの問題を防ぐために何ができますか？

4

2 に答える 2

2

たぶんそれはdisplay:noneCSS属性のせいです。ドキュメントの準備ができたら、非表示にしてみませんか？ドキュメントの読み込み中に読み込みが表示されます。displayで属性を削除するだけです.modal

そしてjavascript：

jQuery(document).ready(function () {
    jQuery('body .modal').hide();
    jQuery('body').on({
      ajaxStart: function() {
        jQuery(this).addClass('loading');
      },
      ajaxStop: function() {
        jQuery(this).removeClass('loading');
      }
    });
});
于 2012-08-22T15:46:07.673 に答える
1

参照されているスタイルシートにスタイルルールに一致するHTML要素がない場合、私の経験では、スタイルルールに関連するリソースは読み込まれません。これを回避する1つの方法は、データURIを使用することです。これは、リソースがスタイルシートですでに使用可能であることを意味します。もちろん、特定の古いブラウザ（IE7）をサポートする必要がある場合、これは機能しません。

于 2012-08-22T16:17:24.657 に答える