HTML and CSS Reference
In-Depth Information
Page Visibility
The Page Visibility API is something I've waited a long time for! I'm really eager to start taking advantage of this
feature, as it provides huge performance benefits to end users and developers. The Page Visibility API allows the
browser to handle or “toggle” content and system resources based on the visibility of the page. Simply put, if you
aren't looking at something—say, if its on another tab—the browser will stop allocating resources to that content,
freeing up more system resources for the content that the user is currently viewing. Let's take a look at working with
the Page Visibility API in an ad example (see Listing 6-4).
Listing 6-4.
Page Visibility API Example
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<body>
</body>
<script>
var isHidden,
state,
visibilityChangeEvent;
function adInit(event) {
console.log(event.type)
if (typeof document.hidden !== "undefined") {
isHidden = "hidden";
visibilityChangeEvent = "visibilitychange";
state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
isHidden = "mozHidden";
visibilityChangeEvent = "mozvisibilitychange";
state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {
isHidden = "msHidden";
visibilityChangeEvent = "msvisibilitychange";
state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
isHidden = "webkitHidden";
visibilityChangeEvent = "webkitvisibilitychange";
state = "webkitVisibilityState";
}
document.addEventListener(visibilityChangeEvent, function (event) {
if (document[state] == "hidden") {
pauseAd();
} else {
startAd();
}
}, false);
}
