0

私は Paul Irish の Infinite Scroll jQuery Plugin を使用していますが、ページにコンテンツをロードするたびに、次の HTML マークアップがロード グラフィックとして DOM に追加されることに気付きました。

<div id="infscr-loading" style="display: none; width: 100%;">
    <img alt="Loading..." src="loading.gif" />
    <div></div>
</div>

読み込み中のグラフィックが DOM から取り出され、新しいコンテンツが読み込まれると再び挿入される様子を注意深く観察すると、グラフィックはページの左側から中央に向かって実際にアニメーション化されます。このおそらく意図しない「アニメーション」が発生しないようにするにはどうすればよいですか? これが実際に意図した動作であるかどうかはよくわかりませんが、上記のマークアップが DOM から切り離されて再挿入された結果だと思います...間違っている可能性もあります。

ローディンググラフィックが常に正確な中央に表示され、「アニメーション」がないことを確認する方法はありますか?

スクリプトへのリンクは次のとおりです: https://github.com/paulirish/infinite-scroll/blob/master/jquery.infinitescroll.js

この効果を生み出す CSS や JS は見当たりません。

4

3 に答える 3

2

CSS で読み込み中の画像を中央に配置しました。

#infscr-loading{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}
#infscr-loading div{
    margin-left:auto;
    margin-right:auto;
    width:360px;
}
于 2014-06-11T13:56:56.650 に答える
1

あなたはそれを削除することができます

('#infscr-loading').remove();

于 2014-11-09T01:30:20.597 に答える
0

これは、infinite-scroll v2.1.0 でテストされています。

ローディングインジケータのセンタリング

CSS で、必要に応じてスタイル#infscr-loadingを設定します。アニメーションとテキストを中央に配置するには:

#infscr-loading {
    text-align: center;
}

完全にカスタムの読み込みインジケータを定義することもできます (idinfscr-loadingは必要ありません:

$('#content').infinitescroll({
    loading: {
        msg: $('<div style="text-align: center">Loading…&lt;/div>')
    }
});

アニメーションを無効にする

$('#content').infinitescroll({
    loading: {
        speed: 0 // default: 'fast'
    }
});
于 2015-03-06T01:06:22.493 に答える