I have some tracking code that the provider (WebTraxs) says should be placed at the bottom of the tag. The problem is that this same code is causing everything on the page (including my jQuery code) to run AFTER the WebTraxs is executed. This execution sometimes takes long enough where images rollovers, etc aren't working because the user is mousing over images before WebTraxs has finished.

Therefore, I'm trying to add the needed tags (from WebTraxs) to the body after the page is loading in the document ready handler, using the following:

 setTimeout(function(){

  var daScript = '<script language="JavaScript" type="text/javascript" src="/Scripts/webtraxs.js" />';
  var daOtherScript = '<noscript><img alt="" src=".php?id=pany&st=img" />';

  $('body').append(daScript);
  $('body').append(daOtherScript);

 },  
 5000);

I have two problems with the above:

1. In Firefox, after 5 seconds, it page goes pletely blank.
2. In IE, there's no errors thrown, but normally you can see the WebTraxs code trying to load a tracking image in the status bar. This is not occurring with the above code.

Is there a better way to acplish my objective here? I'm basically just trying to make sure the WebTraxs code is executed AFTER the document ready handler is executed.

I have some tracking code that the provider (WebTraxs) says should be placed at the bottom of the tag. The problem is that this same code is causing everything on the page (including my jQuery code) to run AFTER the WebTraxs is executed. This execution sometimes takes long enough where images rollovers, etc aren't working because the user is mousing over images before WebTraxs has finished.

Therefore, I'm trying to add the needed tags (from WebTraxs) to the body after the page is loading in the document ready handler, using the following:

 setTimeout(function(){

  var daScript = '<script language="JavaScript" type="text/javascript" src="/Scripts/webtraxs.js" />';
  var daOtherScript = '<noscript><img alt="" src="http://db2.webtraxs./webtraxs.php?id=pany&st=img" />';

  $('body').append(daScript);
  $('body').append(daOtherScript);

 },  
 5000);

I have two problems with the above:

1. In Firefox, after 5 seconds, it page goes pletely blank.
2. In IE, there's no errors thrown, but normally you can see the WebTraxs code trying to load a tracking image in the status bar. This is not occurring with the above code.

Is there a better way to acplish my objective here? I'm basically just trying to make sure the WebTraxs code is executed AFTER the document ready handler is executed.

• javascript
• jquery

Share Improve this question Follow asked Jul 13, 2010 at 15:20 croceldoncroceldon 4,6251212 gold badges6060 silver badges9797 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

Why don't you use the .getScript function:

 setTimeout(function(){

  $.getScript("http://path.to/Scripts/webtraxs.js");
 },  
 5000);

What it's really curious about your code is that you add a <noscript> tag using JavaScript... it does not make any sense. If the user does not have JavaScript the setTimeout won't be fired, thus it <noscript> content won't be displayed.

I'm basically just trying to make sure the WebTraxs code is executed AFTER the document ready handler is executed.

In that case, you just have to do this:

$(document).ready(function(){
    $.getScript("http://path.to/Scripts/webtraxs.js");
});

You don't have to use jQuery's DOMReady event handler. The reason people use DOMReady is that it allows the full DOM to load before firing up scripts that manipulate the page. If you call your scripts too early, parts of your page may not be accessible -- for example, if you call them before <div id="footer">...</div>, they won't be able to see $('div#footer') because it's not been pulled into the DOM yet. And that's great, except that your DOMReady methods will always execute after any in-page scripts have executed first. That's why your webtrax code is getting executed first.

But you can get the same benefits of DOMReady and still control the order of execution by calling your page scripts at the end of your document, when there's nothing left but HTML closing tags. They will be executed in the order they appear.

So try this instead:

<html>
<head>
    <script type="text/javascript" src="myPageScripts.js"></script>
</head>
<body>
    <div id="pagesection1"></div>
    <div id="pagesection2"></div>
    <div id="pagesection3"></div>
    <!--NO MORE CONTENT BELOW THIS LINE-->
    <script type="text/javascript">//<![CDATA[
        runMyPageInitializerScripts();
    //]]></script>
    <script language="JavaScript" type="text/javascript" src="/Scripts/webtraxs.js" ></script>
</body>
</html>

In this script, runMyPageInitializerScripts() would still have plete access to #pagesection1, pagesection2 and pagesection3, but would not see the final script tag. So the page isn't in exactly the same condition as when DOMReady is fired, but for most scripts usually there is no downside.

<script> tags cannot use a shortcut like <script/>.

You have to use <script></script>

Anyways, I don't understand where the difference is on executing those scripts on DOMready or after a specific amount of time. If it blocks the UI it will do the same after 5 seconds no?

You are missing the closing </script> and </noscript> tags.

If you want to keep the <script> tag you may need to escape it (not sure if this persists on newest browsers, but as far as i remember you can't have <script> tags inside a script tag), take old google analytics code as example:

document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics./ga.js' type='text/javascript'%3E%3C/script%3E"));

Splitting the script tag also works:

document.write("<scr"+"ipt src='somescript.js'></sc"+"ript>");

But since you're using jQuery, .getScript() is your best option.