Visibility.js – a wrapper for the Page Visibility API

Most modern browsers have support for the Page Visibility API. According to the MDN, the only two that don’t currently support it are Safari and Opera. Basically, this API allows you to know when a webpage is visible and in focus. With tabbed browsing, this can be a very useful feature, as web pages lose visibility often.

However, the API is fairly low level and requires some vendor prefixes, which is always a great reason to write a wrapper for syntactic sugar. Enter Visibility.js, a wrapper for the API written by Andrey Sitnik. Using it is simple:

var minute = 60 * 1000;
Visibility.every(minute, 5 * minute, function(){
  // Do something every minute for 5 minutes when page is visible.
});

You can check if the Visibility API is available:

if ( Visibility.isSupported() ) {
  // We have support!
}

You also have access to the Visibility API events:

Visibility.onVisible(function(){
  // We are now visible!
});

Visibility.change(function(e, state){
  // e is the original event
  // state is the visibility state name [visible, hidden, prerender]
});