Defered loading of external Javascript files and Safari

Discussion in 'Javascript' started by joaopedrogoncalves@gmail.com, Mar 30, 2005.

  1. Guest

    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/
     
    , Mar 30, 2005
    #1
    1. Advertising

  2. Toby Guest

    I might be missing the point here, but wouldn't it be easier to just
    use iframes to load your remote content?
     
    Toby, Mar 30, 2005
    #2
    1. Advertising

  3. Csaba Gabor Guest

    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


    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.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/
    >
     
    Csaba Gabor, Mar 30, 2005
    #3
  4. Guest

    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.
     
    , Mar 30, 2005
    #4
  5. Guest

    > 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
     
    , Mar 30, 2005
    #5
  6. RobG Guest

    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
     
    RobG, Mar 31, 2005
    #6
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Gustavo Rahal

    thread / twisted defered etc...

    Gustavo Rahal, Feb 10, 2005, in forum: Python
    Replies:
    0
    Views:
    334
    Gustavo Rahal
    Feb 10, 2005
  2. Replies:
    0
    Views:
    345
  3. Replies:
    4
    Views:
    328
  4. Mellow Crow
    Replies:
    6
    Views:
    426
    Richard Cornford
    Nov 4, 2005
  5. Replies:
    1
    Views:
    120
    Randy Webb
    Apr 14, 2006
Loading...

Share This Page