Powered by
Movable Type 3.2
Design by
Danny Carlton





Made with NoteTab

September 26, 2005

Dynamically loading HTML

Going over my bandwidth usage I discovered that this blog uses the bulk of my bandwidth, and that the main page accounts for 5 to 10% of the total bandwidth used. I decided to see if there was anything that I could do about it without sacrificing content. Then I remembered a project I was working on years ago, that I used javascript to load parts of the page when needed. I checked the older scripts and pulled out the necessary parts and got it to work. I tried to simplify it so that it would be as easy to install as possible.

If you notice over on the side of the main page of this blog, my list of Recommended Blogs is now slightly different. If you click on one of the groups, it'll seem to flicker or maybe even say “loading...” for a second or two before showing the list. That's the Dynamically loading HTML!

Here's how it works.

To start with you'll need to insert the following JavaScript in the head of the page...

<script>
var head = document.getElementsByTagName('head').item(0);
function dynLoad(script_id,script_src,target,action)
  {
  old = document.getElementById(script_id);
  if (!old)
    {
    target.innerHTML='<font face="Verdana" size="1" color="#808080">loading...<br></font>';
    script = document.createElement('script');
    script.src = script_src;
    script.type = 'text/javascript';
    script.defer = true;
    target.style.display="block";
    script.id = script_id;
    void(head.appendChild(script));
    }
  else
    {
    target.style.display='block'
    }
  }
</script>

Then save the following two files to your blog directory as titled...

magic.php

<?php
reset ($_GET);
while (list ($key, $value) = each ($_GET))
  {
  $$key=$value;
  }
echo "document.write('<span id=\"$name"."Display\"></span><span class=magicSwitch onclick=\"$name"."Button.style.display=\'none\';dynLoad(\'$name"."Id\', \'./magictext.php?name=$name"."\', $name"."Display, \'$name"."Insert()\');\" id=$name"."Button name=$name"."Button style=\"cursor:pointer\">$name"."»</span>')";
?>

...and...

magictext.php

<?php
reset ($_GET);
while (list ($key, $value) = each ($_GET))
  {
  $$key=$value;
  }
$filename=str_replace(' ', '_', $name);
$text=implode(file("$filename.txt"));
$text=str_replace('"', '\"', $text);
$text=str_replace("\n", "\\\n", $text);
$text=str_replace("\r", "\\\r", $text);
$text=str_replace('script', 'scr"."ipt', $text);
echo "$name"."Code=\"<span class=magicSwitch onclick=\\\"$name"."Button.style.display=''; $name"."Display.style.display='none'\\\" style=\\\"cursor:pointer\\\">«"."$name</span><br>$text\"
$name"."Display.innerHTML=$name"."Code;
function $name"."Insert()
  {
  $name"."Display.innerHTML=$name".";
  }";
?>

Now, save the text you want displayed in a files named as the way you want it displayed. Use an underscore for where you want a space. This will be what is displayed on the page for the visitor to click. I saved the HTML of the links as Group1.txt, and so on.

Next...

To display on your page use...

<script src=magic.php?name=File_Name></script>

The File_Name would be the name of the file you saved, minus the “.txt” extension. If, for example, you actually did use the name “File_Name.txt” for your file, and the code exactly as above the link to display the HTML would look like this...

File Name»

...and clicking on it would display, beneath it, the HTML saved in the file “File_Name.txt”. The link is given the class of “magicSwitch” if you want to control its appearance in the style sheet.

Why go to all this trouble? Because by using this method, people who visit the page, but don't look at the hidden HTML, won't use the bandwidth for it. If you set aside 10k per page in this way and get 1,000 page views a day—that's 10 meg of bandwidth saved every day—roughly 300 meg a month. If your traffic is higher or you have more stuff you can put into a Dynamically loading HTML link, the savings would be even more. Another interesting thing is that the dynamically loaded HTML seems to be cached more frequently than ordinary HTML. Even CTRL-Refresh will still pull it from cache. It takes a complete reload of the browser to grab it from the site again. (So obviously you don't want to put frequently changing stuff in there)

This is a great way to put lengthy blogrolls accessible, yet not use up lots of bandwidth.

Oh, and I had to use » and « because of the way MovableType displays pages. The  part doesn't display. If it does on yours, simply remove it from both PHP files.

Oh, I forgot to mention. This is compatible with IE and FireFox (and therefore also with the latest version of NetScape) but seems to have trouble with Opera. Does anyone even use Opera anymore?

Posted by Danny Carlton at September 26, 2005 08:31 AM

Trackback Pings

TrackBack URL for this entry:
http://www.jacklewis.net/cgi-bin/mt/jl-tb.cgi/2044

Comments

FYI, it does NOT work with Firefox, at least not the Firefox 1.5 beta

You click on the field and NOTHING happens

Posted by: Don Singleton at September 26, 2005 06:20 PM

Hm. It works on my sample page I used developing it. (here) I'll see what the problem could be.

Posted by: Danny Carlton at September 26, 2005 09:40 PM

Actually, it does work in Opera. It works better, and quicker than it did in firefox (I tested in both).
and yes, I do use Opera.

Posted by: Abbie at September 26, 2005 11:17 PM

Post a comment




Remember Me?

(you may use HTML tags for style)

Security verification

Type the characters you see in the image above.