Need to improve page load performance? Make the Kessel run in less than 12 parsecs? This new lightweight method may be the one you're looking for.
So simple, a blathered Ewok could implement.
Mike Foskett - (incept: )
Using the viewport position to late-load content
Apologies for the flagrant copyright abuse Mr Lucas Disney lawyer sir, I'm desisting and ceasing as you press send, honest guv.
So how does it work?
Blocks to be late-loaded are encapsulated in <noscript class=idle-load> elements.
Just how simple is this?
Add the script.
Add configuration options (just before the </body> tag), amend to suit.
Done. So simple a blathered Ewok could code right?
The full version is available in the source of the standalone demo.
Scripting - embrace the dark side
Here's a break down of the uncompressed script.
Use a closure to prevent polluting the global namespace, then declare the internal variables.
The replaceElement() function replaces one element with another, copying content and class. '-ON' is appended to the class.
Used here to replace a <noscript> with a <div>.
The throttle() function prevents stressing the scroll event handler too much.
The scrolling() function is called every 250 ms (default) while the page is scrolled. It needs to be efficiently managed. Micro optimisations should be used wherever they can.
As the viewport approaches each element a call to the replaceElement() function is made.
Finally, expose the initialise function and end the closure.
The idleLoad.init() call sets off the whole thing, optionally passing in the configuration values.
It's possible to fire each <noscript> individually by adding a data-idle='1' which acts as an override for the value of offsetViewportBy. For example the blathered Ewok which should appear below / to the right.
No CGI here Mr Lucas, just a rough demo of what else may be achieved with idle-load.
Run a callback function once the content is added. For example the function loaded() :
The function adds an event listener for the image load event:
Once the image has downloaded the container has it's max-height adjusted to accommodate the image height, and a class of "ON" is applied to enable the CSS filters.
Use the Force young Luke, well okay it's CSS:
Help the aged: IE 6, 7 & 8
Unfortunately the method cannot work in IE 7 & 8, though surprisingly it does in IE 6. If fallback support is required the only known workaround is to use conditional (spit) comments: