jQuery当图像可见时，查看计数++
最近Facebook增加了一个功能，当一个Facebook视频在屏幕上时，它会自动播放，如果它离开屏幕或者即使只是隐藏它的一部分从滚动，视频将停止播放。
我想在我的站点中实现这一功能，它呈现一系列图片，当图片触及屏幕时，将会创建一个jquery帖子来更新数据库中的照片查看计数。 与facebook的区别在于，它只会在每次重新加载后发布一次。 所以反复滚动不会更新视图计数。
我已经找到了这个jQuery代码并尝试了它，但它使用了window.on('scroll')的div元素，在我的情况下这将不起作用，因为我的站点中的图片是用不同的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片段，我在这里找到检查元素是否在屏幕上可见
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的一小部分。
我建议使用像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
链接地址: http://www.djcxy.com/p/83601.html