Code for letting the page load before loading javascript not working

Question

I have five external JavaScript files that are making the page wait to load before these files are finished loading.

I've been reading a lot about removing render-blocking javascript and it seems like the best way to do this is using the code below to let the page load before loading javascript.

The only problem is that I can't get this code to work on my website.

I've tried to place it both before and after the end-body tag, but nothing is happening.

Am I missing anything? Something wrong in the code or something else I have to do?

Thanks!

<script type="text/javascript">
    function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.src = "yourjavascripttoload.js";
        document.body.appendChild(element);
    }

   if (window.addEventListener)
       window.addEventListener("load", downloadJSAtOnload, false);
   else if (window.attachEvent)
       window.attachEvent("onload", downloadJSAtOnload);
   else window.onload = downloadJSAtOnload;
</script>

Why not just put the scripts at the bottom of the page? That's the simplest solution. I wouldn't wait for the `window` to be fully loaded before fetching the scripts, because it's much later than necessary to deal with render-blocking. — , Apr 17 '16 at 13:16
*"it's not working"* ... so what happens? Any console errors? — charlietfl, Apr 17 '16 at 13:23
@charlietfl - Absolutely nothing is happening. No errors and no changes. — Jeanette Haugsdal, Apr 17 '16 at 13:29
@JeanetteHaugsdal: I hadn't noticed that you tried it at the bottom of the page, and it didn't work. If that's the case, then it's likely just some syntax issue, or you got the `src` wrong. — , Apr 17 '16 at 13:30
Have you checked browser dev tools network to see if files are even loading? Perhaps paths are incorrect — charlietfl, Apr 17 '16 at 13:31
...and are *any* scripts working? Would it be possible that you disabled JavaScript on that page or in the browser in general? — , Apr 17 '16 at 13:33
@charlietfl - Just checked and the files are loading as they should. — Jeanette Haugsdal, Apr 17 '16 at 13:43
@squint - The scripts are both loading and working as they should. — Jeanette Haugsdal, Apr 17 '16 at 13:43
Then since there's no answerable issue here, you should probably just delete the question. Glad you got it working. — , Apr 17 '16 at 13:46
@squint - I'm unfortunately not allowed to delete the question. Since I couldn't get any of the codes to work for me, I decided defer loading of javascript instead and this works fine. — Jeanette Haugsdal, Apr 17 '16 at 14:37

OmarJ · Answer 1 · 2016-04-17T13:31:08.423

0

Try using async attribute for the script tags,

or like this,

referenced from here,

https://www.safaribooksonline.com/library/view/high-performance-javascript/9781449382308/ch01s03.html

var xhr = new XMLHttpRequest();
xhr.open("get", "file1.js", true);
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4){
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.text = xhr.responseText;
            document.body.appendChild(script);
           //Adding to head
          //document.getElementsByTagName("head")[0].appendChild(script);
        }

    }
};
xhr.send(null);

edited Apr 17 '16 at 13:31

answered Apr 17 '16 at 13:19

OmarJ

89
3

Yikes... why us XHR to get a script? And are you going to give credit for where you copied this code? – Apr 17 '16 at 13:27
yes you are correct, it can cause cross origin issue too – OmarJ Apr 17 '16 at 13:31

claudios · Answer 2 · 2016-04-17T13:30:33.010

First check the exact location of your external script file. Then put this script before the </body> tag.

<script type="text/javascript">
   var script = document.createElement('script');
   script.setAttribute('src', 'http://yourdomian.com/yourjavascripttoload.js');
   script.setAttribute('type', 'text/javascript');
   document.getElementsByTagName('head')[0].appendChild(script);
</script>

or in Jquery

$(document).ready(function(){
     $.getScript("yourjavascripttoload.js", function(){
       alert("Script loaded and executed.");
     });
});

Code for letting the page load before loading javascript not working

2 Answers2