So far, we've been introduced to the Page Visibility API, and have covered the benefits of using it to pause content when it is not visible. It's worth spending a moment to see how we can implement it in our code, and how such a simple change can reap massive benefits.
We'll begin with covering the plain JavaScript first, before looking at using jQuery later in the chapter:
Let's start by extracting the markup files we need from the code download that accompanies this book. For this demo, we'll need
basicuse.htmlandbasicuse.css. Save the files into the root andcsssubfolders of our project area respectively.Next, in a new file add the following code:
function log(msg){ var output = document.getElementById("output"); output.innerHTML += "<li>" + msg + "</li>"; } window.onload = function() { var hidden, visibilityState, visibilityChange; if (typeof document.hidden !== "undefined") { visibilityChange = "visibilitychange"; } document...