Page tree

Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.


How does asynchronous loading work? (Mark, please add your thoughts) Asynchronous loading works by deferring the injection of external elements/code until all required elements are loaded.  This usually involves writing javascript code to manage the deferral.  The example below is a snippet of javascript code that when placed at the bottom of the page will wait for the document_ready state before attempting to load/inject any external ad elements.  This code would replace any of the code from the examples above.  The position in the page is important, and note that we still include the single page call (spcjs.php) script as described above, only in the footer instead of the header.

This code should be placed at the bottom of your page somewhere at the end of the footer:

Code Block
titleAsynchronous Loading
<script type='text/javascript' src=''></script>
<!-- async replacement for openad spc calls -->
<script type='text/javascript'> 
 * this code will wait for document ready and then inject OpenX banners
 * into predefined ad divs defined with id='open-X' where X is the OpenX zoneId
$document_ready = 0;
$(document).ready(function() {
    $document_ready = 1;
function displayOpenxAd($id) {
    if(!$document_ready) {
        setTimeout(function(){ displayOpenxAd($id); },1000);
        return false;
    if(typeof(OA_output[$id])!='undefined' && OA_output[$id]!='') {
        var flashCode,
            oDIV = document.getElementById('openx-'+$id);
        if (oDIV) {
            // if it's a flash banner..
            if(OA_output[$id].indexOf("ox_swf.write")!=-1) {
                // extract javascript code
                var pre_code_wrap = "<script type='text/javascript'><!--// <![CDATA[",
                    post_code_wrap = "// ]]> -->";
                flashCode = OA_output[$id].substr(OA_output[$id].indexOf(pre_code_wrap)+pre_code_wrap.length);
                flashCode = flashCode.substr(0, flashCode.indexOf(post_code_wrap));
                // replace destination for the SWFObject
                flashCode = flashCode.replace(/ox\_swf\.write\(\'(.*)'\)/, "ox_swf.write('"+ +"')");
                flashCode = flashCode.replace(/document.write/, "$('#"+ +"').append");

                // insert SWFObject
                if( flashCode.indexOf("ox_swf.write")!=-1 ) {
                }// else: the code was not as expected; don't show it

                // normal image banner; just set the contents of the DIV
                oDIV.innerHTML = OA_output[$id];

In order for the above code to work, we must modify how each ad zone is defined.  The following example shows the modified injection code for the OpenX ad zoneId 2.  This code would be placed anywhere you wanted this ad zone to appear in your site:

Code Block
titleAsynchronous Ad Loading
<div id='openx-2' class="ad">
    $(document).ready(function() {

It is important to note that this code will not work for all OpenX ad types.  For instance most external ads types (these are ads that inject their own code into your OpenX server, which in turn injects into your site) will not work with the asynchronous loading method described above.  Also many 3rd party plugins that allow for extended ad types in OpenX may cause problems with this method of asynchronous loading, such as expanding banners and overlay ads.  It should also be noted that there are other ways of implemented asynchronous loading (such as loading banner ads in iframes, or even using ajax to load ads), however each method has its own advantages and disadvantages.  However, if your ad requirements dictate it, you can implement several methods of asynchronous loading on the same shit if needed.


Caching and advertisement zones

After changes are made in OpenX it takes 1200 seconds till they become visible on the respective page. 

OpenX Plugins, Hacks, Extensions