Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

Delay external content loading for better performance

It is hard to imagine website without without any external content. Either it is a sharing tool like twitter button, widget or even advertising like adsense, they're all using external scripts that will increase your website loading time.

But that doesn't mean you shouldn't use any external content. Some of this tools are essential for your website. Advertising provides income, sharing generates more traffic and widgets make your website more interactive. So you can only watch how these scripts slow down your website? 

No. There is solution for this problem. If loading external content is delayed until other page is load, it significantly increase page loading speed. And to do that, you can use Fast Page Content Loader javascript class.

All you need to do is to include one javascript file in your html head, create class instance and delay remote content using addContent method.

Here is an example of how to use this script:

<!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"><!--
/*
 * 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"><!--
/*
 * Queue the content for loading it later
 * It will appear in this position of the page.
 */
cl.addContent({
    content: content.igoogle,
    inline: true,
    width: 728,
    height: 90
});
// --></script> 
</div>
<h3>AdSense ad here</h3>
<div class="content">
<script type="text/javascript"><!--
cl.addContent({
    content: content.adsense,
    inline: true,
    width: 728,
    height: 90
});
// --></script> 
</div>
<h3>Twitter button here</h3>
<div class="content">
<script type="text/javascript"><!--
cl.addContent({
    content: content.twitter,
    inline: true,
    width: 728,
    height: 90
});
// --></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>

You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus