jQuery画像が表示されているときに表示件数が表示されます++

Question

最近フェイスブックのビデオが画面に表示されると、自動的に再生され、画面から離れるかスクロールしなくなっても、ビデオの再生が停止します。

この機能を自分のサイトに実装して、一連の画像をレンダリングしたい場合、画像が画面に表示されたときに、その写真のビュー数をデータベースで更新するjquery投稿が作成されます。フェイスブックとの違いは、すべてのページのリロードが一度だけポストされることです。したがって、上下にスクロールしても表示回数は更新されません。

私はこのjqueryコードを見つけて試しましたが、window.on('scroll')に添付されたdivのelementidを使用しています。私の場合、私のサイトの画像が異なるIDで動的に読み込まれるため動作しません。ここで私は自分のサイトで画像を表示方法は次のとおりです。ここで

//note that this is a result of foreach loop 
<div class="photoContainer"> 
    <img src="something1.jpg" /> 
</div> 
<div class="photoContainer"> 
    <img src="something2.jpg" /> 
</div> 
<div class="photoContainer"> 
    <img src="something3.jpg" /> 
</div> 

は、私がここにCheck if element is visible on screen

function checkVisible(elm, evalType) { 
    evalType = evalType || "visible"; 

    var vpH = $(window).height(), // Viewport Height 
     st = $(window).scrollTop(), // Scroll Top 
     y = $(elm).offset().top, 
     elementHeight = $(elm).height(); 

    if (evalType === "visible") return ((y < (vpH + st)) && (y > (st - elementHeight))); 
    if (evalType === "above") return ((y < (vpH + st))); 
} 

を発見した「何とか」作業jQueryのスニペットで、あなたは私の中で使えるように私は、このjqueryのコードを変換する助けることができます私は本当にそれで良いではないとしてページ。..どんな助けもありがとう。詳細が必要かどうか尋ねてください。

EDIT：ビュー数が表示される前にdivが画面に完全に表示されている必要があります。上記のjQueryコードは、divのわずかな部分だけが可視であっても実行されます。

Answer 1

もっと速くしたい場合は、onScreenのようなライブラリを使用することをお勧めします。要素がのときにイベントまたは何かを起動する！あなたがそれを行う方法を学びたいのであれば

がここライブラリ

$('elements').onScreen({ 
    container: window, 
    direction: 'vertical', 
    doIn: function() { 
    // Do something to the matched elements as they come in 
    }, 
    doOut: function() { 
    // Do something to the matched elements as they get off scren 
    }, 
    tolerance: 0, 
    throttle: 50, 
    toggleClass: 'onScreen', 
    lazyAttr: null, 
    lazyPlaceholder: 'someImage.jpg', 
    debug: false 
}); 

によって提供されるオプションのサンプルです（ここでそれは時間に戻っ小さなプロジェクトで私を助けた）から学ぶクールrefrenceです

http://upshots.org/javascript/jquery-test-if-element-is-in-viewport-visible-on-screen