Demo of dynamic Javascript script loading
with bezen.load + bezen.domwrite + bezen.ready
by Eric Bréchemier

Google Ads Block #1

In this example, I load three blocks of Google Ads, an Amazon Widget and the Google Analytics script in a dynamic and progressive way.

This page uses the minified script bezen.load + bezen.domwrite + bezen.ready version 2009-01-14 "Calvin's Snowball".

Google Ads Block #2

With dynamic script loading using
bezen.load + bezen.domwrite + bezen.ready,
this page loaded in:
(initial page load)
(complete loading)


This demonstration was set up by Eric Bréchemier, Freelance Software Designer. It results from extensive research on browsers behaviors with regards to script loading, with one goal in mind: being able to defer the loading of legacy third party scripts still using the ill-famed document.write method.

Since any call to the document.write method after page load will reset the document to a blank page, it had to be replaced with a convincing equivalent. This is the role played by bezen.domwrite, a module part of the Javascript library, which simulates document.write and safeguards the document.

Amazon Widget

See also

In this page, the scripts are loaded dynamically, in a chosen sequence: first the three Google Ads (at top, middle, and bottom of the page), then the Amazon Widget (above), finally the Google Analytics script (last in the document).

The complete loading time is similar for the static and the dynamic script loading. There are several advantages to the dynamic approach however: the initial page loads much faster and the page is more reactive to user events such as scrolling. Besides, the dynamic elements may be loaded in a custom order and after configurable delays.

Check the static loading for comparison:

Google Ads Block #3

Google Analytics

The Google Analytics script: is not loaded yet