473,849 Members | 1,802 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Defered loading of external Javascript files and Safari

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.getEle mentsByName to work properly:

<div title="180x150" id="advertiseme nt" name="advertise ment"
style="width:18 0px;height:150p x;padding:1px;b order: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="JavaS cript1.1" type="text/javascript">
//<![CDATA[
var ar = document.getEle mentsByName('pu blicidade');
for( i=0; i<ar.length; i++) ar[i].innerHTML =
document.getEle mentById(ar[i].title).innerHT ML;
//]]>
</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
5 5217
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
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.getEle mentsByName to work properly:

<div title="180x150" id="advertiseme nt" name="advertise ment"
style="width:18 0px;height:150p x;padding:1px;b order: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="JavaS cript1.1" type="text/javascript">
//<![CDATA[
var ar = document.getEle mentsByName('pu blicidade');
for( i=0; i<ar.length; i++) ar[i].innerHTML =
document.getEle mentById(ar[i].title).innerHT ML;
//]]>
</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
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
> Some possible background reading for ideas:
http://groups-beta.google.com/ group/comp.lang.javas cript/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
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.getEle mentsByName to work properly:

<div title="180x150" id="advertiseme nt" name="advertise ment"
The 'name' attribute is not allowed on div elements.

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

Getting getElementsByNa me 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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

17
2794
by: CES | last post by:
All, I was wondering if their is a way of loading an external script fill from within a script?? <script language="javascript" type="text/javascript"> function test(var){ <script language="javascript" src="../scripts/base.js" type="text/javascript" /> } </script> Obviously this would cause n error but this would give you an idea of what I'm looking to do. I know I can do this with a simple include but...
1
3815
by: ozzy.osborn | last post by:
Hello All, I have been struggling with a cross browser solution to loading external javascript files on the fly. I have been successful using the following code in IE6: var newScr = document.createElement("SCRIPT"); newScr.src = "newScr.js"; newScr.type="text/javascript";
2
1893
by: www.gerardvignes.com | last post by:
I am using this to load the client JavaScript for a web application when it is selected by the user) via an Ajax connection to the server. I have found only two ways of loading new JavaScript after the web page is loaded. 1. Create a new script element (where head is the id of the head tag): var s = document.createElement('script'); s.setAttribute('type','text/javascript'); s.setAttribute('src', 'scripts/myscript.js');
6
2782
by: Venkatesh | last post by:
Hello All, I have couple of doubts regarding the concept of on-demand javascript loading using javascript code. I could see on the net different techniques for achieving this - techniques like: 1. document.write("<script src= language='JavaScript'></script>); 2. sc = document.createElement("<script>"); sc.setAttribute("src", ); and append this to the head
1
3411
by: agatha.life | last post by:
I did a javascript for the loading of images (I didn't want to have the images loaded in "on loading" because they are too many). The website is for a model and if you look at the codeof pages ( for ex. http://www.agathamoon.com/gallery_48_eng.htm ) using explorer or firefox it works, with safari it doesn't! :( The idea is to have the word "loading" appearing while going from an image to another.
6
2228
by: ernesto.tejeda | last post by:
Hello, I have a couple of questions regarding the loading of .js files for the browser and would like anyone to point me wher to find the answer (or if you know the answer and tell me will do just fine ;) ) - If I have several pages all using 'somejs.js' file this file is shared on disk and is downloaded only once... but how about in memory, is it also shared and just loaded once? -Also, when are the .js files unloaded from memory?
1
1496
by: Danny | last post by:
Hey everybody, I am a complete newbie with Javascript but was wondering if anybody could tell me how to load pages dynamicly within a div? Here is the site: http://regiesrule.info, i would like to have the tabs on the top instead of opening up something inside the same html document I would like to be able to load an external webpage in it. Also if that is impossible then i would like to know why the current setup does not work in IE7?
20
4071
RMWChaos
by: RMWChaos | last post by:
Currently testing in: WinVista / IE7 I have been working on getting xmlhttprequest going for weeks now. I have finally gotten a semi-working script going. Pulling up text or xml files works great and populates into the webpage; however, executing javascript has a few problems: 1. Opens on a blank page, but not a new page. It appears to compeltely overwrite the original page. I want it to update the existing page by loading within a <div>...
1
7430
by: npm | last post by:
Hi I've checked out this page (and it works fine) in FF, IE, Opera, Chrome and Safari: http://www.w3schools.com/dom/tryit.asp?filename=try_dom_list_loop But when I try and tweak it for a site I'm working on, it doesn't work in Chrome and Safari. I used their exact external javascript to load the xml file: function loadXMLDoc(dname)
0
9893
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
11005
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10665
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10723
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10349
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
7894
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5735
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
4544
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
3177
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.