Run external javascript file on load

Question

We made a website through webnode.nl, because we hadn't enough time to make a website using html. Now we added a widget using a external site using a script tag with the link to this site. But through this widget the page is loading slow. Now I had the idea to run the script after the page is loaded. But I can't access the code of the widget and I can't access the html of the website. I can only access the code block in which I pasted the script tag.

The script tag:

<script type="text/javascript" src="http://mycountdown.org/countdown.php?cp2_Hex=d21a1a&cp1_Hex=F9F9FF&img=-3&hbg=&fwdt=420&lab=1&ocd=My Countdown&text1=Valentijnsdag!&text2=valentijnsdag!&group=My Countdown&countdown=My Countdown&widget_number=3015&event_time=1455408000&timezone=Europe/Amsterdam"></script>

Can someone help me?

PS: English is not my first language, so I don't know if my English is correct

add the script tag at the end of the <body>, just before closing the <body>. — Lal
– Lal, Commented Feb 13, 2016 at 16:54
I can't acces the whole html. Only the litle code block in which I can add html. — Luuk Verhagen
– Luuk Verhagen, Commented Feb 13, 2016 at 16:56

ZeroBased_IX · Accepted Answer · 2016-02-13 16:55:27Z

Place it at the end of the <body> and add async to the script tag i.e.

<script async src=""></script>

More info here: http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html There is also the defer attribute.

Typically you want to use async where possible, then defer then no attribute. Here are some general rules to follow: If the script is modular and does not rely on any scripts then use async. If the script relies upon or is relied upon by another script then use defer. If the script is small and is relied upon by an async script then use an inline script with no attributes placed above the async scripts.

Edit You may be better using Defer:

defer downloads the file during HTML parsing and will only execute it after the parser has completed. defer scripts are also guarenteed to execute in the order that they appear in the document.

It doesn't work. I added the defer atribute but now the script doesn't execute.

zer00ne · Accepted Answer · 2016-02-13 17:07:47Z

if you can write script blocks then write the following in whatever you are allowed to use.

<script>
  // Create a <script ...></script> element
  var widget = document.createElement('script');

  // Set src="URL_of_widget"
  widget.setAttribute('src', 'http://mycountdown.org/countdown.php?cp2_Hex=d21a1a&cp1_Hex=F9F9FF&img=-3&hbg=&fwdt=420&lab=1&ocd=My Countdown&text1=Valentijnsdag!&text2=valentijnsdag!&group=My Countdown&countdown=My Countdown&widget_number=3015&event_time=1455408000&timezone=Europe/Amsterdam');
  
  // Set async
  widget.setAttribute('async', 'async');

  // Insert <script> as the last element child of <body>
  document.body.appendChild(widget);
</script>

Collectives™ on Stack Overflow

Run external javascript file on load

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related