64

I work with an advertising company, where we tag certain pages to track activity. A client of mine wants to fire off a javascript tag to track activity AFTER the page has finished loading entirely (to prevent the page content from loading slowly due to slow tag load times).

An example tag that should load AFTER the page has fully loaded is:

<script>document.write('<s'+'cript language="JavaScript" src="http://jact.atdmt.com/jaction/JavaScriptTest"></s'+'cript>')</script>

I was looking at some stackoverflow threads and I came across the below implementation which I think will work:

window.onload = function(){
  <script language="JavaScript" src="http://jact.atdmt.com/jaction/JavaScriptTest"></script>
};

I tested this on my own webpage and I did get the tag to fire off, but I'm wondering if there are any alternate or more robust methods, ideally using jquery of some kind.

Below is a sample implementation that the client tried, but it seems to break their page:

<script>
jQuery(window).load(function () {$('<script language="JavaScript" src="http://jact.atdmt.com/jaction/JavaScriptTest"></script>').insertAfter('#div_name');});
</script>

I haven't done JQuery in a while and was hoping I could get some input from other members here. Is there any other way I can call the above script after page load using JQuery?

Thanks,

Improve this question
4
  • If you're using jQuery you can just do $.getScript("urlHere") - but if you're doing ads I'd reconsider jQuery - it's 80kb of code which is a lot for an ad. Commented Nov 1, 2013 at 23:27
  • It's more like a 1x1 pixel which may call additional scripts. $.getScript will call the URL after all of the content on the page loads? Commented Nov 1, 2013 at 23:32
  • You can also add your script at the end of the page. Commented Feb 7, 2020 at 15:33
  • Note that namespaced functions will not work. For example, &callback=ns.init_gm or &callback=ns%2Einit_gm will trigger an invalid function error. &callback=google_maps_callback_cannot_use_namespaced_function will not trigger an error. Commented Feb 20, 2023 at 7:02

8 Answers 8

Reset to default
112

So, there's no way that this works:

window.onload = function(){
  <script language="JavaScript" src="http://jact.atdmt.com/jaction/JavaScriptTest"></script>
};

You can't freely drop HTML into the middle of javascript.

If you have jQuery, you can just use:

$.getScript("http://jact.atdmt.com/jaction/JavaScriptTest")

whenever you want. If you want to make sure the document has finished loading, you can do this:

$(document).ready(function() {
    $.getScript("http://jact.atdmt.com/jaction/JavaScriptTest");
});

In plain javascript, you can load a script dynamically at any time you want to like this:

var tag = document.createElement("script");
tag.src = "http://jact.atdmt.com/jaction/JavaScriptTest";
document.getElementsByTagName("head")[0].appendChild(tag);
Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

If you want to call a function in the asynchronously-loaded script as soon as it's loaded, you can do this: $.getScript('async.js', function() { my_function(); });
getScript will not use Browser cache .This will reload the file and will take time
Is there a way to do something after the script has loaded? Doing it straight after this means the script hasn't been loaded yet. (Using plain js, not jquery.)
@mcv - Means what script hasn't been loaded yet? Your question is not specified enough and probably belongs in its own question if it's at all different from the original question here. You can put an onload event handler on the <script> tag you are inserting if you want to know when it is loaded. There are tens of thousands of articles on the web about dynamically loading scripts. Lots of explanation there.
You're right. My issue is handled in this question: stackoverflow.com/questions/14644558/… . Although that didn't quite fix it, because I'm loading the Youtube API, which apparently isn't entirely initialised yet when that callback fires, so it provides its own hard-coded callback to onYouTubeIframeAPIReady().
|
16

To easily "delay" script execution after the page is loaded use 'defer' attribute:

<script src="demo_defer.js" defer></script>

Keep in mind this only works with external scripts (called with 'src' attribute)

Documentation:

https://www.w3schools.com/tags/att_script_defer.asp

https://javascript.info/script-async-defer

Improve this answer

3 Comments

I don't understand why this is not the right & simplest solution!
For me it's a bit misleading. The script will still be downloaded before onload but only executed afterwords. I, just like the author, wanted to not block resources until onload event fires
This actually does not, this will still load the js before all else AFTER HTML rendering, if you want to actually load a script after page load it needs to be done async via js itself hence why all vendor scripts you get form facebook etc do it
13

For a Progressive Web App I wrote a script to easily load javascript files async on demand. Scripts are only loaded once. So you can call loadScript as often as you want for the same file. It wouldn't be loaded twice. This script requires JQuery to work.

For example:

loadScript("js/myscript.js").then(function(){
    // Do whatever you want to do after script load
});

or when used in an async function:

await loadScript("js/myscript.js");
// Do whatever you want to do after script load

In your case you may execute this after document ready:

$(document).ready(async function() {
    await loadScript("js/myscript.js");
    // Do whatever you want to do after script is ready
});

Function for loadScript:

function loadScript(src) {
  return new Promise(function (resolve, reject) {
    if ($("script[src='" + src + "']").length === 0) {
        var script = document.createElement('script');
        script.onload = function () {
            resolve();
        };
        script.onerror = function () {
            reject();
        };
        script.src = src;
        document.body.appendChild(script);
    } else {
        resolve();
    }
});
}

Benefit of this way:

  • It uses browser cache
  • You can load the script file when a user performs an action which needs the script instead loading it always.
Improve this answer

1 Comment

Nice! However, wouldn't it be better to do pure JavaScript here? Why are you using jQuery here? Like replace if() with document.querySelector("script[src='" + src + "']") === null
11

The second approach is right to execute JavaScript code after the page has finished loading - but you don't actually execute JavaScript code there, you inserted plain HTML.
The first thing works, but loads the JavaScript immediately and clears the page (so your tag will be there - but nothing else).
(Plus: language="javascript" has been deprecated for years, use type="text/javascript" instead!)

To get that working, you have to use the DOM manipulating methods included in JavaScript. Basically you'll need something like this:

var scriptElement=document.createElement('script');
scriptElement.type = 'text/javascript';
scriptElement.src = filename;
document.head.appendChild(scriptElement);
Improve this answer

2 Comments

If you use document.write() after the document has been loaded, it will clear the current document and start a new one which is certainly not what the OP wants.
Oh, YOu're right of course! I'll edit my answer to reflect that.
6

Focusing on one of the accepted answer's jQuery solutions, $.getScript() is an .ajax() request in disguise. It allows to execute other function on success by adding a second parameter:

$.getScript(url, function() {console.log('loaded script!')})

Or on the request's handlers themselves, i.e. success (.done() - script was loaded) or failure (.fail()):

$.getScript(
    "https://code.jquery.com/color/jquery.color.js",
    () => console.log('loaded script!')
  ).done((script,textStatus ) => {
    console.log( textStatus );
    $(".block").animate({backgroundColor: "green"}, 1000);
  }).fail(( jqxhr, settings, exception ) => {
    console.log(exception + ': ' + jqxhr.status);
  }
);
.block {background-color: blue;width: 50vw;height: 50vh;margin: 1rem;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block"></div>

Improve this answer

1 Comment

Heads-up: By default, $.getScript() does not leverage the browser cache and always loads the full script from the server.
2

Here is a code I am using and which is working for me.

window.onload = function(){
    setTimeout(function(){
        var scriptElement=document.createElement('script');
        scriptElement.type = 'text/javascript';
        scriptElement.src = "vendor/js/jquery.min.js";
        document.head.appendChild(scriptElement);

        setTimeout(function() {
            var scriptElement1=document.createElement('script');
            scriptElement1.type = 'text/javascript';
            scriptElement1.src = "gallery/js/lc_lightbox.lite.min.js";
            document.head.appendChild(scriptElement1);
        }, 100);
        setTimeout(function() {
            $(document).ready(function(e){
                lc_lightbox('.elem', {
                    wrap_class: 'lcl_fade_oc',
                    gallery : true, 
                    thumb_attr: 'data-lcl-thumb', 
                    slideshow_time  : 3000,
                    skin: 'minimal',
                    radius: 0,
                    padding : 0,
                    border_w: 0,
                }); 
            });
        }, 200);

    }, 150);
};
Improve this answer

Comments

1 

<script type="text/javascript">
$(window).bind("load", function() { 

// your javascript event

)};
</script>

Improve this answer

1 Comment

This answer is missing its educational explanation.
0

http://jsfiddle.net/c725wcn9/2/embedded

You will need to inspect the DOM to check this works. Jquery is needed.

$(document).ready(function(){
   var el = document.createElement('script');
   el.type = 'application/ld+json';
   el.text = JSON.stringify({ "@context": "http://schema.org",  "@type": "Recipe", "name": "My recipe name" });

   document.querySelector('head').appendChild(el);
});
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.