Login   Register  
Icontem

File: testContentLoader.html

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  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: 2011-02-17 01:46
Size: 4,994 bytes
 

Contents

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="http://files.jsclasses.org/graphics/jsclasses/loading.gif" 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="http://pagead2.googlesyndication.com/pagead/show_ads.js">\n'+
		'<' + '/script>\n',
	twitter:
		'<a href="http://twitter.com/share" 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="http://files.jsclasses.org/graphics/jsclasses/twitter.png" width="24" height="24" alt="ReTweet" align="middle" border="0"> ReTweet</a>\n'+
		'<script type="text/javascript" src="http://platform.twitter.com/widgets.js"><'+'/script>',
	igoogle:
		'<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/datetime_v2/datetime_v2.xml&amp;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>