Loading scripts after page load

Question

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    lt script gt document write   lt s   cript language  JavaScript  src  http   jact atdmt com jaction JavaScriptTest  gt  lt  s   cript gt    lt  script gt    I was looking at some stackoverflow threads and I came across the below implementation which I think will work   window onload   function       lt script language  JavaScript  src  http   jact atdmt com jaction JavaScriptTest  gt  lt  script gt       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    lt script gt  jQuery window  load function         lt script language  JavaScript  src  http   jact atdmt com jaction JavaScriptTest  gt  lt  script gt    insertAfter   div name        lt  script gt    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

User · Answer

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);

User · Answer

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

User · Answer

So  there s no way that this works   window onload   function       lt script language  JavaScript  src  http   jact atdmt com jaction JavaScriptTest  gt  lt  script gt       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

User · Answer

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

User · Answer

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       x000D   x000D    getScript  x000D       https   code jquery com color jquery color js   x000D           gt  console log  loaded script    x000D      done  script textStatus     gt    x000D      console log  textStatus    x000D          block   animate  backgroundColor   green    1000   x000D       fail   jqxhr  settings  exception     gt    x000D      console log exception          jqxhr status   x000D      x000D     x000D   block  background-color  blue width  50vw height  50vh margin  1rem   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div class  block  gt  lt  div gt  x000D   x000D   x000D

User · Answer

x000D   x000D   lt script type  text javascript  gt  x000D    window  bind  load   function      x000D   x000D     your javascript event x000D   x000D      x000D   lt  script gt  x000D   x000D   x000D

User · Answer

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  quot js myscript js quot   then function           Do whatever you want to do after script load      or when used in an async function  await loadScript  quot js myscript js quot       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  quot js myscript js quot           Do whatever you want to do after script is ready      Function for loadScript  function loadScript src      return new Promise function  resolve  reject        if     quot script src   quot    src    quot    quot   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

[javascript] Loading scripts after page load?

Examples related to javascript

Examples related to jquery