By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
446,190 Members | 858 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 446,190 IT Pros & Developers. It's quick & easy.

Defered loading of external Javascript files and Safari

P: n/a
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/

Jul 23 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
I might be missing the point here, but wouldn't it be easier to just
use iframes to load your remote content?

Jul 23 '05 #2

P: n/a
Well, you have the right idea about wanting to reduce
load times. One of THE rudest things on the internet
is where you have to sit and wait to use a site because
the adserver can't be bothered to load its ad (quickly
or at all). It's one thing to show an ad. It's quite
another where ad tardiness starts to cripple your own
site.

Your ad is not displaying at all on my Firefox 1.0.1+ (a
nightly build from March 20), though its placeholder
is there (ie. space for a blank pic sans frame).

Some possible background reading for ideas:
http://groups-beta.google.com/group/...4f6806b71219c/

However, isn't what you are doing overblown (and also
crippling to several browsers)? Why not just do a
<body onLoad="now load the images">, or if you need
javascript (isn't an ad having javascript going too far?)
why not stuff things into an iframe and set the iframe's
source using the same type of <body onLoad=...> construct.

Csaba Gabor from Vienna
jo****************@gmail.com wrote:
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/

Jul 23 '05 #3

P: n/a
We used to have iframes, but some ad campaigns are javascript and flash
based. It just didn't work the way it was supposed to.

Iframes don't resize properly for text ads too. Google's adsense also
work using external javascript calls, for instance.

Jul 23 '05 #4

P: n/a
> Some possible background reading for ideas:
http://groups-beta.google.com/ group/comp.lang.javascript/bro wse_frm/t...
Thank you very much for pointing me to the discussion, but like Michael
Winter points out,
" you should be aware that the SCRIPT
element doesn't support an id attribute under any version of HTML or
XHTML".

I've also tried using XMLHTTPRequest and eval() (or changing the
mimetype to text/javascript), but
Firefox only allows connections from the same host:port as the original
page. We have more than 200 servers and our sysadmin guys would
certainly hate having to install reverse proxies for the adservers on
every place we use this for deferring javascript loading.
However, isn't what you are doing overblown (and also
crippling to several browsers)? Why not just do a
<body onLoad="now load the images">, or if you need
javascript (isn't an ad having javascript going too far?)
why not stuff things into an iframe and set the iframe's
source using the same type of <body onLoad=...> construct.


It's a web portal with lots of flash ads, even videos,
we've used iframes until two/three years ago, it doesn't resize
properly
and it doesn't work for text ads. On the http://www.sapo.pt/ page we
even have
a <span> tag loading a text ad.

We have more than 1 million pageviews a day and the only complains we
had so far were
from Safari users - such as myself.

Joao Pedro Goncalves

Jul 23 '05 #5

P: n/a
jo****************@gmail.com wrote:
Hi, [...] 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"
The 'name' attribute is not allowed on div elements.

<URL:http://www.w3.org/TR/html4/index/attributes.html>

Getting getElementsByName to work at all on elements that aren't
supposed to have a name is depending on non-specified behaviour.

[...] 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">
ids and names must start with a letter, not a number.

<URL:http://www.w3.org/TR/html4/types.html#type-name>
Since you are giving the browser invalid HTML, then what the browser
does with it can't be relied upon to be consistent between browsers.

[...]
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


Safari users may not see that as a 'problem' ;-)

[...]

--
Rob
Jul 23 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.