Hi,
I want to load an external javascript file, get its results and stick
them inside a <div> block. I also
want to do this in several places on a web page.
This way the browser doesn't have to wait for the external resource to
load to show up the page,
thus giving a perceiving faster load time for the user.
Since i didn't found any way to do this (even the MSIE DEFER attribute
would mess everything up if
the javascript ever used a document.write() - and we use those a lot),
i came up with the following
technique:
1 - Create a placeholder where you want code generated by the external
js file. You can also
place an image or content announcing to the user that the page is
"Loading.. ".
Use the title attribute uniquely. Use the same unique name for
'name' and 'id' - MSIE needs
this to get document.getElementsByName to work properly:
<div title="180x150" id="advertisement" name="advertisement"
style="width:180px;height:150px;padding:1px;border :1px solid
#CCC;float:left;">
<img src="http://imgs.sapo.pt/images/2004/hp/pub180x150.gif"
width="180" height="150" border="0" />
</div>
2 - At the bottom of the document create a hidden div block which
points to the javascript resource you wish to load. The attribute 'id'
must map to the 'title' attribute defined above :
<div id="180x150" style="display:none">
<script src="http://foo.com/myjs.js"></script>
</div>
3 - Paste the following code right before </body> to load the
javascript files in the right place.
This uses the innerHTML method to replace code from the hidden
div to the placeholder on the main document.:
<script language="JavaScript1.1" type="text/javascript">
//<![CDATA[
var ar = document.getElementsByName('publicidade');
for( i=0; i<ar.length; i++) ar[i].innerHTML =
document.getElementById(ar[i].title).innerHTML;
//]]>
</script>
We are using this technique in http://www.sapo.pt/index.html (don't try
it on Safari, you won't get your commercial ads. ) . Hit reload and see
how
the ads appear after the page is fully displayed. They were loaded via
an adserver that
sends javascript with html encoded inside a document.write().
This technique works well in Firefox 1 and MSIE6, but not in Safari. I
think that Safari doesn't parse well the DOM tree, thus leaving empty
the hidden div's.
I'd love to hear some comments and feedback from the community on the
technique and how to get it to work on Safari.
Thanks in Advance,
Joao Pedro Goncalves
Portugal Telecom
http://www.sapo.pt/
