kostya572
kostya572

Reputation: 169

Page loading blocks by remote javascript

I am loading external javascript on my site through:

<script language="javascript" type="text/javascript">
document.write("<script src='http://remoteserver/banner.php?id=10&amp;type=image&amp;num=3&amp;width=200'><\/script>");
</script>

Everything was fine, but today was a big timeout from the remote server and page loading on site was blocking.

Is there possibility to load javascript asynchronous or to load it after page loads? I don't want page load interruption while remote server not working.

I know there are tag async in HTML5, but it's not working, i think because this script is more complex than javascript (its ending with ".php"). Also i know it's better to put javascript files before /body tag to prevent this problem, but it's not the best solution.

Do you know other solutions?

Upvotes: 3

Views: 876

Answers (2)

Homer6
Homer6

Reputation: 15159

Sync script blocks the parser...

Incorrect Method:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
</script>

Async script will not block the rendering of your page:

Correct method:

<script type="text/javascript">
    (function(){
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = "https://apis.google.com/js/plusone.js";
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
    })();
</script>

Source: http://www.youtube.com/watch?feature=player_detailpage&v=Il4swGfTOSM&t=1607

Upvotes: 3

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 174967

You can easily do it by creating DOM nodes.

<script>
    var scriptEl = document.createElement("script"); //Create a new "script" element.
    scriptEl.src = "http://remoteserver/banner.php?id=10&amp;type=image&amp;num=3&amp;width=200";
    // ^ Set the source to whatever is needed.
    document.body.appendChild(scriptEl);
    // Append the script element at the bottom of the body.
</script>

Upvotes: 1

Related Questions