jQuery 当图像可见时，查看计数 ++

Question

最近 facebook 添加了一项功能，当 facebook 视频出现在屏幕上时，它会自动播放，如果它离开屏幕，或者甚至只是隐藏其中的一部分以防止滚动，视频将停止播放。

我想在我的网站中实现这个功能，它会呈现一系列图片，当图片出现在屏幕上时，将发布一个 jquery 帖子来更新该照片在数据库中的查看次数。与 facebook 的不同之处在于它只会在每个页面重新加载时发布一次。所以反复上下滚动不会更新查看次数。

我找到了这个 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>

这是我在这里找到的“不知何故”工作的 jquery sn-p 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 代码转换成可以在我的页面中使用吗，因为我不太擅长它。任何帮助表示赞赏。请询问您是否需要更多详细信息。

编辑：在查看计数之前，我需要 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
});

如果你想学习如何做，这里有一个很酷的参考资料可供学习（它帮助我及时完成了一个小项目）

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