Owais Malik presents

COD: Content on Demand via AJAX

by Owais Malik

A Bloated Whale Lurking Below the Fold

Often times the overall load time of a page can be slowed due to a large or complex module or section that is loading below the visible portion of a web page on a long vertically scrolling page. Some users rarely scroll and go below this point, known as "the fold", a term borrowed from the newspaper industry designating the line where a newspaper is folded over in half.

CODspeed Ahead!

COD alleviates the burden of this content to the intial load time by only loading it when it is scrolled into view. This improves the load time performance of a page. The Content on Demand solution utilizes Javascript and AJAX to load content only when it is scrolled into view or above the fold.

COD Guts

This section will breakdown how COD works. It will detail the important javascript functions that are used and other technical issues. If you have not got the stomach for raw javascript code and skeletal HTML, then you are advised to skip ahead to the next section.

Determine the window height

One of the first things that need to be done is to determine where the fold line is. This is done by finding the current height of the viewable area in the browser. This is done in javascript like this: docHg=w.innerHeight||d.documentElement.offsetHeightThe height is also redetermined when the browser is resized, so that we are always aware exactly where the fold line is.

Locate COD Modules

In the wild, dolphins use sound to locate objects. However, current versions of javascript do not support echolocation. Therefore, to enable COD:

Thar she blows!

As you scroll down, deeper into the murky depths of the page, the COD enabled content nears the fold line. When the content target area is in range, the AJAX call to load the content is triggered. The range is a variable in the javascript that can be set to fire the AJAX call when the content is the specifed number of pixels below the fold. This number can be tweaked to ensure that the content has been loaded by the time the user scrolls down to it.

COD can also be used to load Flash content on demand. The trigger function can be modified to work with Flash. Look for a demo of this functionality soon.

Prepare to Dive

This page contains a working example of COD via AJAX. After this section is some dummy content. Keep scrolling until you reach the content loaded on demand. The COD sections are in gray. If you are using Firefox or Safari, you will see a nifty little debug window that will show you far you are from a COD enabled module and indicate when it has loaded. In addition, you can use the Firebug extensions for Firefox, the Activity monitor for Safari or HTTPWatch plugin for IE to verify that content is loaded as your scroll closer to it.

Lower your periscope and start scrolling!

Scroll Down.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fringilla placerat massa. Duis nibh nisi, posuere quis, porta quis, sagittis ac, ante. Nam sed nunc et leo varius tempus. Morbi lacus. Nulla viverra. Phasellus luctus. Suspendisse at sem. Maecenas egestas consequat massa. Praesent neque neque, mattis ut, tempus dictum, condimentum nec, tellus. Morbi lacus. Integer hendrerit laoreet dolor. Morbi laoreet eleifend mi. Suspendisse leo lectus, lobortis in, consectetuer eget, interdum non, nunc. Aliquam erat volutpat. Maecenas quam. Sed neque nunc, malesuada posuere, tincidunt a, condimentum eu, nunc.

Keep Going...

Mauris sit amet turpis a sem adipiscing sagittis. Maecenas metus diam, aliquet quis, molestie vel, hendrerit vitae, nibh. Vivamus gravida fermentum nibh. Aenean luctus purus ac ligula. In hac habitasse platea dictumst. Vestibulum nec leo. Etiam tortor nunc, tincidunt a, cursus mattis, blandit at, urna. Quisque sit amet justo. Aenean velit dolor, consequat vel, faucibus eget, molestie id, lorem. Aliquam id mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus erat sapien, eleifend nec, tempor quis, vestibulum nec, velit.

Scroll, Scroll, Scroll...

Nullam eget pede. In pretium nisl a enim dignissim porta. Integer sit amet libero at est mattis dapibus. Suspendisse ultricies ultrices purus. Donec aliquet. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus pharetra erat vel neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed tortor. Aliquam erat volutpat. Maecenas in dui. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum accumsan ultricies ligula. Maecenas sed nisl. Curabitur blandit, elit in scelerisque malesuada, nisi nisi suscipit lectus, eu pellentesque ligula dui et felis. Vivamus accumsan magna id tortor.

A Little Bit Farther...

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse quis nibh. Fusce porta congue ligula. Curabitur condimentum, est vel scelerisque faucibus, urna purus gravida tortor, id suscipit eros sem eu orci. In pharetra, augue et venenatis mattis, velit augue elementum enim, in rutrum dolor pede eget justo. Pellentesque purus magna, pharetra lacinia, ultricies quis, tincidunt sit amet, erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse diam turpis, lacinia at, feugiat accumsan, vestibulum sit amet, nisl. Duis mattis tortor vitae sem. Donec nec lectus. Aliquam leo urna, pellentesque vel, convallis eget, imperdiet eu, elit.

You're Almost There...

Cras sed lorem. Quisque urna quam, adipiscing quis, nonummy et, rhoncus sed, leo. Donec quam. Donec vel nibh ac velit semper faucibus. Etiam enim est, mollis sed, fringilla eu, commodo a, elit. Fusce imperdiet. Sed sodales, nisl vel blandit vestibulum, purus nisl feugiat justo, non malesuada eros lorem in leo. Donec sagittis. Sed at felis. Nulla feugiat elit. Nunc consequat arcu vel metus faucibus mollis. Pellentesque ac justo mollis magna pretium facilisis. Etiam dolor lorem, porttitor eget, gravida in, suscipit sed, ante. Integer pretium erat at elit.

Here it Comes COD PROMO

Promo 1 Content

Scroll Down.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fringilla placerat massa. Duis nibh nisi, posuere quis, porta quis, sagittis ac, ante. Nam sed nunc et leo varius tempus. Morbi lacus. Nulla viverra. Phasellus luctus. Suspendisse at sem. Maecenas egestas consequat massa. Praesent neque neque, mattis ut, tempus dictum, condimentum nec, tellus. Morbi lacus. Integer hendrerit laoreet dolor. Morbi laoreet eleifend mi. Suspendisse leo lectus, lobortis in, consectetuer eget, interdum non, nunc. Aliquam erat volutpat. Maecenas quam. Sed neque nunc, malesuada posuere, tincidunt a, condimentum eu, nunc.

Keep Going...

Mauris sit amet turpis a sem adipiscing sagittis. Maecenas metus diam, aliquet quis, molestie vel, hendrerit vitae, nibh. Vivamus gravida fermentum nibh. Aenean luctus purus ac ligula. In hac habitasse platea dictumst. Vestibulum nec leo. Etiam tortor nunc, tincidunt a, cursus mattis, blandit at, urna. Quisque sit amet justo. Aenean velit dolor, consequat vel, faucibus eget, molestie id, lorem. Aliquam id mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus erat sapien, eleifend nec, tempor quis, vestibulum nec, velit.

Scroll, Scroll, Scroll...

Nullam eget pede. In pretium nisl a enim dignissim porta. Integer sit amet libero at est mattis dapibus. Suspendisse ultricies ultrices purus. Donec aliquet. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus pharetra erat vel neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed tortor. Aliquam erat volutpat. Maecenas in dui. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum accumsan ultricies ligula. Maecenas sed nisl. Curabitur blandit, elit in scelerisque malesuada, nisi nisi suscipit lectus, eu pellentesque ligula dui et felis. Vivamus accumsan magna id tortor.

A Little Bit Farther...

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse quis nibh. Fusce porta congue ligula. Curabitur condimentum, est vel scelerisque faucibus, urna purus gravida tortor, id suscipit eros sem eu orci. In pharetra, augue et venenatis mattis, velit augue elementum enim, in rutrum dolor pede eget justo. Pellentesque purus magna, pharetra lacinia, ultricies quis, tincidunt sit amet, erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse diam turpis, lacinia at, feugiat accumsan, vestibulum sit amet, nisl. Duis mattis tortor vitae sem. Donec nec lectus. Aliquam leo urna, pellentesque vel, convallis eget, imperdiet eu, elit.

You're Almost There...

Cras sed lorem. Quisque urna quam, adipiscing quis, nonummy et, rhoncus sed, leo. Donec quam. Donec vel nibh ac velit semper faucibus. Etiam enim est, mollis sed, fringilla eu, commodo a, elit. Fusce imperdiet. Sed sodales, nisl vel blandit vestibulum, purus nisl feugiat justo, non malesuada eros lorem in leo. Donec sagittis. Sed at felis. Nulla feugiat elit. Nunc consequat arcu vel metus faucibus mollis. Pellentesque ac justo mollis magna pretium facilisis. Etiam dolor lorem, porttitor eget, gravida in, suscipit sed, ante. Integer pretium erat at elit.

Here it Comes COD LISTINGS!

Promo 2 Content
idlocstatus