Why this code doesn't work (and how to repair it)?
<p>This question is a consequence of <a href="http://stackoverflow.com/questions/15871307/ultimate-solution-to-defer-javascript-and-jquery-after-page-is-loaded">another question of mine</a>.</p>

<p>The code is:</p>

<pre><code>&lt;script type='text/javascript'&gt;
    var scripts = [ 
        "http://www.---.com/include/jquery-1.8.3.min.js",
        "http://www.---.com/include/functions.js",
        "http://www.---.com/include/myjs.js",
        "http://www.---.com/include/plugins/bxslider/bxslider.js" 
    ];
    function downloadJSAtOnload() { 
        for( var i=0; i&lt;scripts.length; i++ ) {
            var element = document.createElement('script');
            element.src = scripts[i];
            document.body.appendChild(element);
        }
        $(document).ready(function(){
            $('#mainslide .bxslider').bxSlider({
                slideWidth: '960',
                mode: 'vertical',
                speed: '500',
                captions: false,
                pager: false,
                controls: false,
                nextText: 'Next',
                prevText: 'Prev',
                auto: true,
                autoHover: true,
                pause: 3000
            });
        });
    }
    if (window.addEventListener) window.addEventListener('load', downloadJSAtOnload, false);
    else if (window.attachEvent) window.attachEvent('onload', downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
&lt;/script&gt;
</code></pre>

<p>The error generated is <strong>"Uncaught ReferenceError: $ is not defined "</strong>.</p>

<p>The strange is that everything works perfectly (slideshow, lightbox, ...) in lots of browsers and verions. Just in IE8 and Safari 4 an alert is showed to the user.</p>
