Delayed Content Loading

It may be prudent or desired, at times, to delay publishing certain content when a web page is loaded. An example is here:

One way to do it is to run a JavaScript function to delay loading the content for a specified number of seconds. That is what I'll show you how to do in today's article.

In this article, the content pulled in after a delay is referred to as remote content.

A reason to delay publishing remote content can be to omit the content from page-scanning robots. The robots scan the page before the remote content is loaded.

Another reason is to predispose a site user to remain on the page for a certain length of time. The reward may be an answer to a clue or perhaps a discount code. If you know how to do it, a countdown timer might be placed to let the site user know how much longer they need to wait for the reward.

Note that most browsers will not show the remote content when viewing page source code, even after the remote content has been retrieved and inserted into the page. But some browsers might show the remote content under certain conditions, like when the remote content itself is selected (for some browsers). Therefore, don't use this delayed content technique for secret stuff.

Because the remote content is pulled in with JavaScript Ajax code, the location of the remote content needs to be at the same domain as the web page.

Implementation is in two parts. There is the div where the remote content will be inserted into. And there is JavaScript to retrieve the remote content and insert it into the div.

Here is an example div. Put the div on your web page where you want the remote content to be placed.

<div id="div-4-delayed-content" style="border:3px double green; border-radius:1em; padding:1em;"></div>

The div's id value is repeated in the JavaScript. Therefore, if the div id value changes, the JavaScript also needs to be changed. And vice versa.

The div may be designed however you wish.

Below is the JavaScript source code. Put the JavaScript anywhere on the web page. Near the bottom of the source code, immediately above the cancel </body> tag generally is a good place.

There are 3 places to customize. Each is mentioned below this box with the JavaScript source code.

<script type="text/javascript">
// Begin customizations.
var DelayJS_NumberOfSecondsToDelay = 8;
var DelayJS_ContentToGet = "/my-test-page.php";
var DelayJS_IdWhereToPutContent = "div-4-delayed-content";
// End of customizations.
function InsertContentAfterDelay()
{
   var http = new XMLHttpRequest();
   if(! http) { alert("Sorry, unable to connect to obtain content."); return; }
   http.onreadystatechange = function()
   {
      if(http.readyState == 4)
      {
         if(http.status == 200) { document.getElementById(DelayJS_IdWhereToPutContent).innerHTML = http.responseText; }
         else { alert("Sorry, unable to obtain content: "+http.status+" "+http.statusText); }
      }
   }
   http.open("GET",DelayJS_ContentToGet,true);
   http.send();
}
setTimeout(InsertContentAfterDelay,parseInt(DelayJS_NumberOfSecondsToDelay*1000));
</script>

Customization notes —

At the DelayJS_NumberOfSecondsToDelay variable, replace 8 with the number of seconds to delay before retrieving the remote content. If your application requires it, the value may be a decimal number.

At the DelayJS_ContentToGet variable, replace /my-test-page.php with the URI of the remote content. (A URI is the URL minus the leading https:// and domain name.)

At the DelayJS_IdWhereToPutContent variable, replace div-4-delayed-content with the id value of the div where the remote content is to be inserted. Note: If the id value of the div changes sometime in the future, the value of DelayJS_IdWhereToPutContent must change accordingly.

When the JavaScript is placed on your web page, and the page has a div with the correct id value, then after a specified delay the div will be filled with the remote content that the JavaScript retrieves.

(This content first appeared in Possibilities newsletter.)

Will Bontrager