在加载 javascript 之前让页面加载的代码不起作用

Question

我有五个外部 JavaScript 文件使页面在这些文件完成加载之前等待加载。

我已经阅读了很多关于删除渲染阻止 javascript 的内容，似乎最好的方法是使用下面的代码让页面在加载 javascript 之前加载。

唯一的问题是我无法让此代码在我的网站上运行。

我尝试将它放在 end-body 标记之前和之后，但没有任何反应。

我错过了什么吗？代码有问题还是我必须做的其他事情？

谢谢！

<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>

Answer 1

首先检查外部脚本文件的确切位置。然后把这个脚本放在</body>标签之前。

<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>

或在 Jquery 中

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

Answer 2

尝试对脚本标签使用异步属性，

或者像这样，

从这里引用，

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);