Faster Loading Pages With Delayed Content

A content-heavy page can take a while to load. Too long a while.

There are tricks a person can employ, such as (i) putting the faster-loading items near the top so the person has something to look at immediately and (ii) reducing the page load by removing or shrinking items. And others.

The delayed content solution in this article is related to that second-mentioned trick, reducing the page load. With this particular solution, some of the page load is delayed.

Nothing is permanently removed or shrunk. When the person is likely to want it, the rest of the content is loaded.

In other words, load part of the page, enough so the person can see what's available. Load the rest of the content on demand. Use your server resources to deliver the content only when it is likely to be utilized.

On-demand, in this article, is indicated when the web page is scrolled. When scrolled, the rest of the content is retrieved and inserted into the page.

(Other on-demand triggers could be programmed, such as (i) a certain amount of time has passed since the page was loaded or (ii) the site user clicks something.)

The http://lightfocus.com/album-nature/birds.php page is an example of a scroll triggering the balance of the page load.

That entire page, as of this writing, contains over 30 images. Only 8 are loaded when the page is first accessed. A scroll causes the rest of the images to be inserted into the page.

You'll see the size of the scrollbar thumb shrink rapidly as the rest of the images load. (A scrollbar thumb is the scroll box in the scrollbar shaft, that which is dragged along the shaft to change which part of the page is visible.)

If you try the page, understand the Lightfocus.com server is generally pretty speedy. Still, there are a lot of images to load. So the first time, before the additional images are in your browser's cache, you may be able to see the "loading" image if you scroll down to the bottom of the page fast enough.

Ajax is used to load the delayed content.

Implementing Delayed Content

Before implementing the code, two things need to be done with the content.

1. Create the web page with all the content it will have.

2. Move some of the content from the web page to a separate file. Get the content from below the area a person would see first in the browser window.

   The file the content is moved to can be named anything you wish, but using .php or .html as a file name extension can make it easier to keep track of things.

For the live Lightfocus.com page being used as an example, the web page file is at /album-nature/birds.php and /album-nature/birds-ajax.php is the file with some of the page's content.

When your web page file and the file where some of the web page content was moved to are both prepared, you're ready to implement the code.

The code has a required customization, a requested customization, and an optional customization. See the notes following the code.

Put this code into the web page where the content was removed from.

<script>
var DelayedInsertFile = "";
var DelayedInsertDone = true;
function DelayedInsert(file)
{
   DelayedInsertFile = String(file);
   DelayedInsertDone = false;
}
</script>


<div id="delayed-content-div">
<script>DelayedInsert("/album-nature/birds-ajax.php")</script>
</div>


<script>
function LatentInsertProcess()
{
   if( LatentInsertDone ) { return; }
   LatentInsertDone = true;
   http = new XMLHttpRequest();
   if( ! http ) { return; }
   var morediv = document.getElementById("delayed-content-div");
   morediv.innerHTML = '<div style="display:table; margin:0 auto;"><img src="http://lightfocus.com/17includes/workingspinner.gif"></div>';
   http.onreadystatechange = function() { LatentInsertResponse(http,morediv); }
   http.open("GET",LatentInsertFile,true);
   http.send();
}

function LatentInsertResponse(http,morediv)
{
   if(http.readyState == 4)
   {
      if(http.status == 200) { morediv.innerHTML = http.responseText; }
   }
}

var addEventHandler = function(element,eventType,functionRef)
{
    if( element == null || typeof(element) == 'undefined' ) {return;}
    if( element.addEventListener ) { element.addEventListener(eventType,functionRef,false); }
    else if( element.attachEvent ) { element.attachEvent("on"+eventType,functionRef); }
    else { element["on"+eventType] = functionRef; }
};

addEventHandler(window,"scroll",LatentInsertProcess);
</script>

The required customization —

The required customization is colored red. Replace /album-nature/birds-ajax.php with the location of the delayed content file to be inserted into your web page on demand.

The requested customization —

The requested customization is colored blue. It contains http://lightfocus.com/17includes/workingspinner.gif as the src URL of the "loading" image mentioned further above.

If you decide to implement this for longer than temporary, we request that you use your own "loading" image instead of pulling it from the Lightfocus.com server.

The optional customization —

The optional customization is colored orange and occurs in two places. It is the id of the div into which the delayed content will be inserted. delayed-content-div is the id value.

Optionally, the id value may be changed. If you so so, both occurrences of the id value in the above code must be changed. You'll find the two occurrences at about lines 12 and 24.

When implemented, the first scroll the JavaScript detects will cause the delayed content to be inserted into the web page.

To Implement for Multiple Pages

If you wish to implement the delayed content functionality for several or many pages, the JavaScript can be reused.

In the source code found in the above Implementing Delayed Content section, you'll see three distinct sections:

1. JavaScript
2. A div
3. JavaScript

To reuse the JavaScript, put the first JavaScript into the HEAD area of your web pages and put the last JavaScript into the web pages at or near the cancel </body> tag.

To have the functionality available if desired on all pages of the domain, the JavaScript needs to be in the HEAD and near-cancel-body-tag areas of every page. Although present, the JavaScript will be inactive unless the div (the second of the three distinct sections) is on the page.

The div, the second of the three distinct sections, must only be on pages with the delayed-content feature.

Whether implemented for one page or multiple pages, when testing your implementation this is how it should work: Part of the page loads so you can see what's available. The rest loads when the page is scrolled.

(This article first appeared in Possibilities ezine.)

Will Bontrager