<!--
/*
* 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&up_color=blue&up_dateFormat=wmd&up_firstDay=0&up_24hourClock=1&up_clocks=&synd=open&w=320&h=148&title=&lang=en&country=ALL&border=%23ffffff%7C3px%2C1px+solid+%23999999&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>
|
Download
