0

ユーザーがボタン (時刻表の印刷) を押すと、時刻表を示すページがポップアップ ウィンドウに表示され、印刷オプションが自動的に表示される機能を作成しています。ただし、ポップアップがまだタイムテーブルをロードしているときに、アニメーション GIF を表示したいと考えています。ポップアップの時刻表は AJAX でフェッチされないため、ajax の開始と停止を使用できません。

<input type="button" value="Print Timetable" class="printButton" onclick="window.open(url, ' _parent','height=550, width=800');"/>

これは、タイムテーブルのポップアップでこれまでに起こっていることです:

<div id="animated-logo" class="animated-logo">
    <a href="/" title="Print your timetable">Test</a>
</div>

<script  type="text/javascript">
        $('.animated-logo').addClass('logo');
        $('.animated-logo').removeClass('animated-logo');
    if (window.print){ self.print();}

</script>

明らかに、そのアニメーション GIF は機能しませんが、それは始まりです。

どんな助けでも素晴らしいでしょう。ありがとう！

4

1 に答える 1

2

jQuery のこちらload()をご覧ください。

HTML 

 <div id="" class="itm-animated-logo">
        <a href="/" title="Print your timetable">Test</a>
        <div id="time-table">...</div>
    </div>

jQuery

$("#time-table").load(function() {
  $(this).parent().removeClass("itm-animated-logo");
}

CSS

.itm-animated-logo {background-image: loading.gif;}

そのため、ポップアップが ( class でitm-animated-logo) 読み込まれると、その背景はloading.gifファイルになります。タイム テーブルが読み込まれると ( #time-table)、ポップアップのクラスが削除され、その後、背景も同様に削除されます。

これの欠点は、タイム テーブルの一部が読み込まれることです (そのため、タイム テーブルはチャンクで読み込まれます)。この場合、それらは背景画像の「上」になります。これを修正するには、追加の div を作成します。たぶん、このソリューションはさらに優れています：

HTML 

 <div id="" class="itm-animated-logo">
        <div id="loading"><img src="loading.gif" alt="Loading your time table" height="32" width="32" /></div>
        <a href="/" title="Print your timetable">Test</a>
        <div id="time-table">...</div>
    </div>

jQuery

$("#time-table").load(function() {
  $(this).parent().children("#loading").fadeOut("slow");
}

CSS

#loading {
   display: block;
   width: 32px;
   height: 32px;
   margin: 50px auto;
   padding: 0;
}
于 2012-05-22T11:18:33.737 に答える