how to get an event when a div gets visible

Question

I'm rendering a website using js, and would like to optimize my render cycle.

Is there a way to get an event when a page element gets visible to the user?

this way delaying rendering of elements until they are visible?

Duplicate of [How to check if an element is in the view of the user with jquery](http://stackoverflow.com/questions/8229291/how-to-check-if-an-element-is-in-the-view-of-the-user-with-jquery)? — Rudie, Mar 02 '13 at 19:42
Actually I say **no**, since this question is either tagged jQuery, nor does he mention he uses it. — Lukas Knuth, Mar 02 '13 at 23:38

score 1 · Answer 1 · answered Mar 02 '13 at 19:50

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

this is using jQuery - if you can't use jQuery please let me know I will try to do in regular js — James Daly, Mar 02 '13 at 19:52

score 1 · Answer 2 · edited May 23 '17 at 10:25

1

google "viewport visible"

or

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

or

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

or

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

or

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

edited May 23 '17 at 10:25

Community

1
1

answered Mar 02 '13 at 19:56

Rahul Shah

1,438
3
22
41

score 1 · Accepted Answer · answered Mar 02 '13 at 22:14

Since you did not explain if there is any specific lib/framework you are using, or is there any specific condition to render element visible I will give you this:

jQuery $(document).ready() can detects if whole page is loaded.

On the other hand if element was display:none or visibility:hidden, or both or whatever, you can use jQuery is like this : $('element').is(':visible') as a condition and trigger whatever inside if statement.

how to get an event when a div gets visible

3 Answers3