Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Defered loading of external Javascript files and Safari

Reply
Thread Tools

Defered loading of external Javascript files and Safari

 
 
joaopedrogoncalves@gmail.com
Guest
Posts: n/a
 
      03-30-2005
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/

 
Reply With Quote
 
 
 
 
Toby
Guest
Posts: n/a
 
      03-30-2005
I might be missing the point here, but wouldn't it be easier to just
use iframes to load your remote content?

 
Reply With Quote
 
 
 
 
Csaba Gabor
Guest
Posts: n/a
 
      03-30-2005
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


http://www.velocityreviews.com/forums/(E-Mail Removed) 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/
>

 
Reply With Quote
 
joaopedrogoncalves@gmail.com
Guest
Posts: n/a
 
      03-30-2005
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.

 
Reply With Quote
 
joaopedrogoncalves@gmail.com
Guest
Posts: n/a
 
      03-30-2005
> 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 hostort 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

 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      03-31-2005
(E-Mail Removed) 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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
DEFERED IOS pierre Cisco 0 06-04-2007 10:19 AM
Loading external files (xsl and xml) bissatch@yahoo.co.uk ASP .Net 0 03-01-2007 05:36 AM
Dynamically loading external javascript files. ozzy.osborn@gmail.com Javascript 1 04-14-2006 09:42 PM
Image loading using javascript. Handling timeouts and parrallel loading under IE zborisau@gmail.com Javascript 4 08-28-2005 02:02 PM
thread / twisted defered etc... Gustavo Rahal Python 0 02-10-2005 09:06 AM



Advertisments