jQuery Wenn das Bild sichtbar ist, Anzahl der Ansichten ++

Question

Vor kurzem hat Facebook eine Funktion hinzugefügt, bei der, wenn ein Facebook-Video auf dem Bildschirm ist, es automatisch abgespielt wird und wenn es den Bildschirm verlässt ODER nur einen Teil davon vor dem Scrollen versteckt, Das Video wird nicht mehr abgespielt.

Ich möchte diese Funktionalität in meiner Website implementieren, die eine Reihe von Bildern rendert, und wenn das Bild den Bildschirm trifft, wird ein jquery Beitrag erstellt, um die Anzahl der Fotos in der Datenbank zu aktualisieren. Der Unterschied zu Facebook ist, dass es nur EINMAL jede Seite neu laden wird. Wenn Sie also wiederholt nach oben oder unten blättern, wird die Anzahl der Aufrufe nicht aktualisiert.

Ich habe diesen jquery Code gefunden und es versucht, aber es verwendet ein Elementid des div an window.on('scroll') angefügt, das in meinem Fall nicht funktionieren wird, da die Bilder in meiner Site dynamisch mit verschiedenen IDs geladen werden. Hier ist, wie ich Bilder in meiner Seite anzuzeigen:

//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> 

Hier sind ein „irgendwie“ Arbeits jquery Schnipsel, die ich hier gefunden 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))); 
} 

Können Sie mir helfen, diesen jQuery-Code zu umwandeln verwendbar zu sein in meinem Seite als Im nicht wirklich gut damit. Jede Hilfe wird geschätzt. Bitte fragen Sie nach, wenn Sie weitere Informationen benötigen.

BEARBEITEN: Ich brauche das Div vollständig auf dem Bildschirm sichtbar sein, bevor die Ansicht zählen. jQuery Code oben ausgeführt wird, auch nur ein winziger Teil des div ist sichtbar.

Answer 1

Ich würde empfehlen, eine Bibliothek wie onScreen zu verwenden, um Ihnen zu helfen, was Sie schneller wollen. Es wird ein Ereignis oder etwas ausgelöst, wenn das Element auf dem Bildschirm ist!

hier ist ein Beispiel für die von der Bibliothek zur Verfügung stehenden Optionen

$('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 
}); 

Wenn Sie erfahren möchten, wie es hier ist ein cooler refrence von lernen, zu tun (es hat mir geholfen, in einem kleinen Projekt in der Zeit zurück)

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