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. — user1106925
– user1106925, Commented Apr 17, 2016 at 13:16
"it's not working" ... so what happens? Any console errors? — charlietfl
– charlietfl, Commented Apr 17, 2016 at 13:23
@squint - The scripts are both loading and working as they should. — Jeanette Haugsdal
– Jeanette Haugsdal, Commented Apr 17, 2016 at 13:43

claudios · Accepted Answer · 2016-04-17 13:30:33Z

0

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.");
     });
});

edited Apr 17, 2016 at 13:30

answered Apr 17, 2016 at 13:24

claudios

6,6768 gold badges51 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

OmarJ · Accepted Answer · 2016-04-17 13:31:08Z

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, 2016 at 13:31

answered Apr 17, 2016 at 13:19

OmarJ

893 bronze badges

2 Comments

user1106925 Over a year ago

Yikes... why us XHR to get a script? And are you going to give credit for where you copied this code?

OmarJ Over a year ago

yes you are correct, it can cause cross origin issue too

Collectives™ on Stack Overflow

Code for letting the page load before loading javascript not working

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related