how to block the page width javascript
<pre><code>...
&lt;head&gt;
    &lt;script type="text/javascript" src="a.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;button id="test"&gt;click me&lt;/button&gt;
    &lt;script type="text/javascript"&gt;
        show();
        document.getElementById('test').onclick=function(){
            show();
        }
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>the code above:</p>

<p>I put the <code>a.js</code> in the <code>&lt;head&gt;</code> tag, in <code>a.js</code> there's a <code>b.js</code> created by  </p>

<pre><code>document.getElementsByTagName('head')[0].appendChild(document.createElement('script'));  function show(){...} 
</code></pre>

<p>in b.js;</p>

<p>now I want to invoke <code>show()</code> which in the b.js，but it goes error,because b.js hasn't loaded;</p>

<p>I want to add some codes to block the page loading.</p>

<p><code>while(){}</code>  ?</p>

<hr>

<p>actually,I learned b.js should be loaded when function show is invoked;</p>

<p>but what about click event?in addition,I must put the show() in the page.</p>

<p>now,I put another js(base.js) into head tag,the above code will be like this:</p>

<pre><code>...
&lt;head&gt;
&lt;script type="text/javascript" src="base.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="a.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;button id="test"&gt;&lt;/button&gt;
    &lt;script type="text/javascript"&gt;
        //invoke button click event from base.js and b.js
    &lt;/script&gt;
&lt;/body&gt;
...
</code></pre>

<p>for example,there are two click events bind to base.js and b.js(loaded ansync by a.js),when users click the button in the page，the event binded in base.js will be invoked immediately，but then...error...</p>

<p>I must put the invoker in the body tag.</p>
