1

特定の要素がブラウザキャンバスに表示されるとすぐにカスタムイベントを提供するjavascriptライブラリはありますか？

基本的な考え方は、リストの最後の要素が画面に表示されたらすぐに、次の10個の要素を読み込んで、ユーザーが[次のページ]ボタンをクリックする必要がないようにすることです。これを実現するには、最後の要素が表示されるとすぐに発生するonBecomesVisibleイベントが便利です。このようなものはありますか？

Slashdotは、この方法でフロントページの読み込みを行います。

4

4 に答える 4

7

jQueryを使用して独自の単純なプラグインを作成できます。

 $.belowViewport = function(elem){
  var port = $(window).scrollTop() + $(window).height();
  return port <= $(elem).offset().top;
 }

 $.fn.onBecomeVisible = function( fn ){
  var obj = this;
  $(window).scroll( function() {
   obj.each( function() {
    if(!$.belowViewport(this) && !$(this).data('scrollEventFired')){
     $(this).data('scrollEventFired', true);
     fn(this);
    }
   });
  });
  return this;
 }

そして、このように使用します

  $('.elements:last').onBecomeVisible( function(elem){ loadNewElems(); } );

スクリプトは、一致した各要素にfnをバインドします。一致した要素のいずれかがスクロールして表示されると、関数が起動します。どの要素がイベントを発生させたかという関数も渡されます。

ライブを使用してこのイベントをバインドすることはできないため、新しい要素を追加した後に再バインドする必要があることに注意してください（これらの最後の要素にもイベントが必要であると想定しています）。

編集
私はここで間違っていました、：visibleは要素がビューポートにあるかどうかを返しません。ただし、ソースを編集したので、要素がビューポートにあるかどうかをチェックするようになりました。関数は、要素がビューポートの下にあるかどうかをチェックします。要素がビューポートの下にない場合は、ビューにスクロールされており、関数を実行する必要があると想定します。

EDIT2これをgooglechrome1.0
、firefox 3.0.10、IE7でテストしました

于 2009-05-08T12:54:10.107 に答える
2

ダスティン・ディアス（本当に頭がいいので、彼の記事をもっと読む必要があります）は、要素がスクロールして表示されたときの検出に関する記事を2007年に作成しました。

まさにあなたが必要としているものかもしれません。

于 2009-05-08T12:42:30.510 に答える
2

無限のスクロールを見たいと思うかもしれません：

http://plugins.jquery.com/project/endless-scroll

于 2009-05-08T12:32:46.977 に答える
0

別のアイデアは、すべてを表示/非表示にするために常にラッパー関数を使用することです。style.display='none';つまり、 orを直接実行する代わりに$("#something").hide();、要素の ID を渡す独自の関数を常に使用します。

次に、要素がいつ表示/非表示になったかをより簡単に追跡し、イベント ハンドルを実行するように設定できます。

于 2009-05-09T11:00:54.347 に答える