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

最近，facebook增加了一项功能，当facebook视频出现在屏幕上时，它将自动播放，如果它离开屏幕，甚至只是隐藏部分内容，不滚动，视频将停止播放

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

我找到了这个jquery代码并尝试了它，但它使用了附加到

窗口上的div的elementid。在（'scroll'）

上，在我的情况下，它不会工作，因为我的站点中的图片是用不同的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>

//注意这是foreach循环的结果

这里是我在这里找到的一个“不知怎么”工作的jquery代码片段

函数检查可见（elm，evalType）{
evalType=evalType | |“可见”；
var vpH=$（窗口）.height（），//视口高度
st=$（窗口）.scrollTop（），//Scroll Top
y=$（elm）.offset（）.top，
elementHeight=$（elm）.height（）；
if（evalType==“可见”）返回（（y<（vpH+st））&&（y>（st-elementHeight））；
如果（evalType==“高于”）返回（（y<（vpH+st））；
}

你能帮我把这个jquery代码转换成可以在我的页面中使用的代码吗，因为我对它不是很在行。。感谢您的帮助。请询问您是否需要更多详细信息

---

编辑：我需要div在视图计数之前对屏幕完全可见。上面的jQuery代码执行时，即使只有div的一小部分是可见的。

我建议使用类库来帮助您更快地完成所需的工作。当屏幕上的元素为时，它将触发事件或其他事件

以下是该库提供的选项示例

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

如果你想学习如何做到这一点，这里有一个很酷的参考资料可供学习（它在过去的一个小项目中帮助了我）

---

谢谢你，我会调查的。。虽然我不喜欢使用js库，也不喜欢自己编写代码来学习和使用我提出的东西。看起来很整洁，如果没有人帮助，稍后将设置+1作为答案。谢谢。@超级用户我尊重你的学习热情，所以我添加了一个参考，可以帮助你自己编写代码，祝你好运。

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