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