How to time-out javascript?

[Gemini23]

I have a website where I have a search box (supplied by Javascript) that shows source information and live inventory from my suppliers website.

All works 'okay' most of the time and I am fairly happy with it but with two exceptions.

Once a day my supplier updates their inventory and their server is down for 5-30 minutes in the early hours of the morning (UK time). The problem is that my website therefore cannot load the script and the rest of the page won't load until such time as my supplier's website is back online. We have customers world-wide so it isn't ideal as 2.00am UK time obviously isn't the case elsewhere in the world.

Also the loading of the search box can at times delay the loading of my webpages (the search box is on a number of pages).

Two questions:

1. Is there a way to get the javascript to load last (it is placed quite high up on the page - above the fold)

2. If the javascript doesn't load after a number of seconds.. say 10s - is it possible to load a message in its place - ie.. "Inventory updating please call back shortly"

Thanks for any advice...

[Philip M]

Originally Posted by Gemini23

Two questions:

1. Is there a way to get the javascript to load last (it is placed quite high up on the page - above the fold)

2. If the javascript doesn't load after a number of seconds.. say 10s - is it possible to load a message in its place - ie.. "Inventory updating please call back shortly"

Thanks for any advice...

1) Yes. Place the Javascript immediately before the </body> tag.

2) Yes. Provided you can identify the name of a global Javascript variable in the downloaded script,

<script type = "text/javascript">

function testifloaded() {
if (typeof thirdpartglobalvariable == "undefined") {
alert ("Inventory updating please call back shortly");
}
}

window.setTimeout(testifloaded,10000);  // 10 seconds

</script>

Naturally the above script must come after the third-party script. Instead of the primitive alert you might prefer to display a styled message in a <span>.

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

[Old Pedant]

If the inventory is "loaded" using an AJAX call, you can control the AJAX timeout and, upon that timeout, do the same thing Philip showed.

But Philip's answer is a pretty good generic one. Even if the variable is defined, if it doesn't have the value or kind of value you are expecting, you can use that same basic pattern.

[rnd me]

you can add the defer or async attribute to the script tag so that your page does not wait on the script to load before rendering the html.

visually, you want to use HTML and CSS to indicate to all users every time that the script is "loading". after ten seconds, you tell them that it is "unavailable", and when the script arrives, it replaces the "loading"/"unavailable" text with the data/functionality provided by the script, intuitively replacing the message with functionality.

a <progress></progress> usually looks good in those kind of empty containers...