Defered loading of external Javascript files and Safari

J

joaopedrogoncalves

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.innerHTML =
document.getElementById(ar.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/
 
T

Toby

I might be missing the point here, but wouldn't it be easier to just
use iframes to load your remote content?
 
C

Csaba Gabor

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/comp.lang.javascript/browse_frm/thread/35d4f6806b71219c/

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


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.innerHTML =
document.getElementById(ar.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/
Click to expand...
 
J

joaopedrogoncalves

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.
 
J

joaopedrogoncalves

Some possible background reading for ideas:
http://groups-beta.google.com/ group/comp.lang.javascript/bro
Click to expand...
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.
Click to expand...

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
 
R

RobG

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"
Click to expand...

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">
Click to expand...

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
Click to expand...

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

[...]
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Final chapter of "Learn PHP, MySQL and JavaScript" 3
Script working in Firefox but not Chrome and Safari 3
External html 2
Add recipes using JavaScript in table 20
Help with code 0
Safari, innerHTML and XHTML 4
Filename undefined for Blob ? 1
Canvas drawing HTML Javascript on elementor 1

Members online

Total: 85 (members: 1, guests: 84)
Robots: 256

Forum statistics

Threads
473,981
Messages
2,570,188
Members
46,731
Latest member
MarcyGipso

Latest Threads

Top