File: testContentLoader.html

Recommend this page to a friend!
  Classes of Manuel Lemos   Fast Page Content Loader   testContentLoader.html   Download  
File: testContentLoader.html
Role: Example script
Content type: text/plain
Description: Content loader example page
Class: Fast Page Content Loader
Load remote content without delaying the page
Author: By
Last change: - Added support to define priorities to each content element so one element
can be loaded before the others.
- Removed the dimensions of content that does not have a fixed size.
Date: 12 years ago
Size: 4,994 bytes


Class file image Download
<!-- /* * testContentLoader.html * * @(#) $Id: testContentLoader.html,v 1.3 2011/02/17 03:25:06 mlemos Exp $ * */ --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="en"> <head> <title>Test the Content Loader Object</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <style type="text/css"> * { font-family: sans-serif,arial,helvetica } .content { border-width: 1px; border-style: dashed; border-color: blue; padding: 4px; } </style> <script type="text/javascript" src="contentLoader.js"></script> <script type="text/javascript"><!-- /* * Create the content loader object */ var cl = new ML.content.contentLoader(); /* * Do we want to see debug messages in the browser console or alert window? */ cl.debug = true; /* * We can define default content that will be displayed until the actual * content is loaded. */ cl.delayedContent = '<div style="text-align: center"><img src="" width="24" height="24"></div>' // --></script> </head> <body> <h1>Test the Content Loader Object</h1> <script type="text/javascript"><!-- /* * Checking the URL parameter to determine if we load the remote content * (using the object) delaying it until the whole page is loaded, or * if we just output it (without using the object * * Keep in mind that currently the object is not delaying the loading of * the content when the browser is Internet Explorer or Opera due to some * incompatibility issues. */ var href = window.location.href; var question = href.indexOf('?'); if(question == -1) delayed = true; else delayed = (href.substr(question + 1) === '1') if(delayed) { document.write('<h2>Good: Loading remote content (with the object) delaying it until the whole page loads <a href="?1">Reload</a></h2>'); document.write('<p><a href="?0">Click here</a> to see the remote content loading immediately and delaying the rest of the page.</p>'); } else { document.write('<h2>Bad: Loading remote content immediately (without the object) <a href="?0">Reload</a></h2>'); document.write('<p><a href="?1">Click here</a> to see the remote content being delayed to load the rest of the page immediately.</p>'); } /* * Define some example remote content to show in the page */ var content = { adsense: '<script type="text/javascript"><!--\n'+ 'google_ad_client = "ca-pub-2951707118576741";'+ 'google_ad_slot = "5451588426";\n'+ 'google_ad_width = 728;\n'+ 'google_ad_height = 90;\n'+ '//-->\n'+ '<' + '/script>\n'+ '<script type="text/javascript"\n'+ 'src="">\n'+ '<' + '/script>\n', twitter: '<a href="" class="twitter-share-button" data-count="horizontal" data-via="jsclasses" data-related="jsclassesearly:News and insights about the JSClasses site features and the JavaScript world in general" data-related="phpclasses:Ready to use PHP components" data-related="phpclassesearly:News and insights about the PHPClasses site features and the PHP world in general">'+ '<img src="" width="24" height="24" alt="ReTweet" align="middle" border="0"> ReTweet</a>\n'+ '<script type="text/javascript" src=""><'+'/script>', igoogle: '<script src=";up_color=blue&amp;up_dateFormat=wmd&amp;up_firstDay=0&amp;up_24hourClock=1&amp;up_clocks=&amp;synd=open&amp;w=320&amp;h=148&amp;title=&amp;lang=en&amp;country=ALL&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"><'+'/script>' }; // --></script> <h3>iGoogle gadget here</h3> <div class="content"> <script type="text/javascript"><!-- /* * Are we delaying the content? */ if(delayed) { /* * Yes, lets queue the content for loading it later * It will appear in this position of the page. */ cl.addContent({ content: content.igoogle, inline: true, priority: 0 }); } else { /* * No, lets dump the content in the page immediately and watch it * delaying the loading of the rest of the page. */ document.write(content.igoogle); } // --></script> </div> <h3>AdSense ad here</h3> <div class="content"> <script type="text/javascript"><!-- if(delayed) cl.addContent({ content: content.adsense, inline: true, width: 728, height: 90, priority: 2 }); else document.write(content.adsense); // --></script> </div> <h3>Twitter button here</h3> <div class="content"> <script type="text/javascript"><!-- if(delayed) cl.addContent({ content: content.twitter, inline: true, priority: 1 }); else document.write(content.twitter); // --></script> </div> <script type="text/javascript"><!-- /* * Here we reached the end of the page, it's time to load the queued * remote content in the original places. */ cl.loadContent(); // --></script> <h2>The page has loaded now!</h2> </body> </html>