Load external javascript after 5 seconds

I've been searching Google for this, but I can't find exactly what I want.

I want to load an external javascript file (that looks like the code below) after about 5 seconds.

<script type="text/javascript" src="/js/my-js-file.js"></script>

HTML:

Any ideas?

 

You can't, those tags are processed as an HTML element when the document processes. I do not believe adding that line to the HTML after five seconds would actually load the script. I'm fairly sure what you are trying to do is not directly possible.

What are you trying to accomplish? There is most likely another way to get the same results.

 

It's an interesting situation. I'm loading my tumblr blog into my website using the embed code that tumblr gives you. I also have a script that changes mp3 links to a music player. Every now and then, the script that changes the mp3 links to players finishes loading before the tumblr embedded blog loads (because it's being loading from tumblr so naturally, sometimes it's a little slow to load).

If the mp3 script finishes before the tumblr embedded blog loads, then it doesn't change the mp3 links in the blog into players. However, if the two scripts load at the same time or the tumblr blog finishes loading before the mp3 script, then everything works correctly.

So, I have to somehow load the mp3 script after the tumblr blog finishes loading.

Now, the first thing you may suggest is to simply load the mp3 script after everything else loads by using window.onload or something similar. Well, that won't always work either because sometimes the page will finish loading 100% but the tumblr blog won't be completely loaded. Again, because it's being loaded from tumblr and that's just the way their script works.

Since I don't want the mp3 script to load before the tumblr script, and loading it once the page is loaded won't always work either, the only thing I can think of is to load the mp3 script on a delay. I know this wouldn't always work, especially if tumblr took 10-20 seconds to load for some reason. But, I figure that it would work more often if the mp3 script loaded about 5 seconds after the page loaded.

I hope I explained this well enough.

Is there a way to use php too? I saw something about php's "sleep" which delays execution of certain functions I guess. I'm just not sure if it works with javascript.

I found that putting the mp3 script at the bottom of the page helps a little, because it gives the tumblr embed script a better chance to load first. But, it still doesn't always load first.

You would think there would be a way to tell the browser something like... "Hey, wait 20 seconds then load this script!".


Let me explain it another way just in case what I said above is confusing... The page loads and the mp3 script looks for any mp3 links in the page, but since the tumblr blog hasn't loaded yet, it doesn't know that there are mp3 links there, so it figures that it found all the mp3 links and stops. Then, the tumblr blog loads, after the page has actually finished loading, so therefore, the mp3 links in the blog, don't get turned into the mp3 player, because the mp3 player script didn't see those links because the blog wasn't loaded at the time the mp3 script was looking for mp3 links. PHEW! That was a mouth full!

 

Javascript can, but the tag you are using is HTML. Perhaps you can use the jQuery getscript function after a delay (jQuery has functions for delay as well). Jquery is an excellent library, definitely my favorite among the popular frameworks.

 

Would this be correct? I'm not able to test it right now, but I will test tonight. Just wondering how far off I am...

$.getScript('js/my-js-file.js', function() {
  .delay(800);
});

Code (markup):

 

No, that would do an 800ms delay once the file is loaded. I've never done this before, so I don't know exactly how to do that.

 

try loading the script using ajax... refer Alternate Ajax Techniques. you can also use jquery framework to implement the principle

and use oncomplete event to load the mp3 script.

i think this should work!

 

OK, I thought I had the solution below. But, turns out it's not working in Firefox for me. Sigh... back to the drawing board.

                <script type="text/javascript">//<![CDATA[
                    var delay = 3;
                    setTimeout("loadplayer();", delay * 1000);
                       function loadplayer() {
                       var oScript = document.createElement("script");
                       oScript.src = "/js/audio-player.js";
                       document.body.appendChild(oScript);
                       }
                 //]]>
                </script>

Code (markup):

 

OK, thanks to jQuery, I think this is the solution I'll use. This seems to work for most browsers.

	        <script type="text/javascript" src="/js/jquery.js"></script>
                <script type="text/javascript">
                    var delay = 3;
                    setTimeout("loadplayer();", delay * 1000);
                       function loadplayer() {
                       $.getScript('/js/theplayer.js');
                       }
                </script>

Code (markup):

I went with 3 seconds instead of 5... 5 seconds was just too long.

What happens if the browser doesn't support this code for some reason or javascript is disabled? Well, luckily, the way my mp3 player script is set up, it will simply show a link to the mp3 instead of the player in these cases.

 

place the function above the settimeout and it works fine for me.

 

That looks like it should work. Glad you got a working script.