Question

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

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

我找到了这个jquery代码并尝试了它，但它使用附加到window.on('scroll')的div的elementid，在我的情况下，由于我的网站中的图片动态加载了不同的id＆＃，因此无法工作39; S。以下是我在网站上显示图片的方式：

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

这是＆＃34;某种程度上＆＃34;我在这里找到的工作jquery片段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

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

1 个答案: