1

Web サイトのユーザー アカウント領域にエンドレス スクロールを実装しました。次のコードでわかるように、ユーザーがテキストをスクロールすると、さらにデータが読み込まれる前にテキストが短時間表示されます。

if ($('.pagination').length) {
  $(window).scroll(function() {
    var url;
    url = $('.pagination .next_page').attr('href');
    if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 50) {
      $('.pagination').text("Fetching more products...");
       $.getScript(url);
    }
  });
  $(window).scroll();
};

代わりに表示したいアニメーション gif 画像があり、これを行う方法を知りたいですか? 画像に直接リンクすることはできますか？

テキストの代わりに画像を表示する正しい方法は何ですか?

敬具

4

3 に答える 3

2

メソッドを からtext()に変更するだけhtml()で、次のようになります。

$('.pagination').html('<img src="loading.gif" width="30" height="30" alt="loading..." />');

メソッド内で任意の形式の HTML を使用できるため、画像をリンクなどでラップできます。

于 2012-04-08T19:03:28.720 に答える
1 
$('.pagination').html($('<img src="yourimage.gif"/>');

また

$('.pagination').html($('<img/>').attr('src','yourimage.gif'));
于 2012-04-08T19:01:52.703 に答える
1

「正しい」方法はないと思いますが、既存のコードを考えると、これは十分に単純なはずです。

$('.pagination').html('<img src="spinner.gif">');

別の魅力的なオプションは、CSS を使用してスピナーを追加することです。

.pagination.loading{background:url('spinner.gif') no-repeat}

次に、クラスを切り替えます。

$('.pagination').addClass('loading');

ただし、これはすべて、ワークフローと視覚的な好みによって異なります。

于 2012-04-08T19:02:34.103 に答える