Question

我正在使用js渲染网站，并希望优化我的渲染周期。

当页面元素对用户可见时，有没有办法获取事件？

这样可以延迟元素的渲染，直到它们可见为止？

Answer 1

 var viewportWidth = jQuery(window).width(),
 viewportHeight = jQuery(window).height(),
 documentScrollTop = jQuery(document).scrollTop(),
 documentScrollLeft = jQuery(document).scrollLeft(),
 minTop = documentScrollTop,
 maxTop = documentScrollTop + viewportHeight,
 minLeft = documentScrollLeft,
 maxLeft = documentScrollLeft + viewportWidth,
 $myElement = jQuery(element), // your element jquery object
 elementOffset = $myElement.offset();
 if (
 (elementOffset.top > minTop && elementOffset.top < maxTop) &&
 (elementOffset.left > minLeft &&elementOffset.left < maxLeft)
  ) {
  alert('element is visible');
  } else {
  alert('element is not visible');
  }

Answer 2

google "viewport visible"

或

How to tell if a DOM element is visible in the current viewport?

或

http://remysharp.com/2009/01/26/element-in-view-event-plugin/

或

http://www.appelsiini.net/projects/viewport

或

How to check if an element is in the view of the user with jquery

Answer 3

由于您没有解释是否有任何特定的lib /框架正在使用，或者是否有任何特定的条件来呈现元素可见，我会给你：

jQuery $（document）.ready（）可以检测整个页面是否已加载。

另一方面，如果元素是display：none或visibility：hidden，或者两者或者其他什么，你可以使用jQuery就像这样：$（'element'）。is（'：visible'）作为条件和触发器无论内部if语句。

如何在div可见时获取事件

3 个答案: