JavaScript is blocking images from loading

Question

I'm using the following code to allow parallel JavaScript downloading on my website

var head  = document.getElementsByTagName("head")[0]; 

var sTag1 = document.createElement("script");
sTag1.type = sTag1.type = "text/javascript";
sTag1.src = "http://example.com/one.js";

var sTag2 = document.createElement("script");
sTag2.type = sTag2.type = "text/javascript";
sTag2.src = "http://example.com/two.js";

var sTag1 = document.createElement("script");
sTag3.type = sTag3.type = "text/javascript";
sTag3.src = "http://example.com/three.js";

head.appendChild(sTag1); 
head.appendChild(sTag2); 
head.appendChild(sTag3); 

However, using YSlow, it shows that even though one.js, two.js and three.js are downloading in parallel - images are not loading until the last JavaScript is fully downloaded.

What can I do to allow images to not be blocked from loaded due to my JavaScript files downloading.

Answer 1

Load your Javascript files right above the </body> tag.

Answer 2

Where are you triggering that code from? Because you could wait to execute your quoted code until you see the window.load event, e.g.:

<script type='text/javascript'>
function loadMyScripts() {
    /* ...your loading code here...*/
}
window.onload = loadMyScripts; // Or use addEventListener/attachEvent to do it
</script>

The window.load event isn't fired until all of the images are loaded, so you'll be sure the scripts aren't getting in the way. Of course, it also leaves quite a large margin of time for the user to start doing things with the page, so you need to be sure the page doesn't need that JavaScript to be functional.