目前总共四种方法,各有长短,酌情选择。

  1. 方法1:$(document).ready
    利用jquery的ready,前提是需要引用jquery,兼容所有浏览器
    1
    2
    3
    $(document).ready(function() {
    alert("Success !");
    });
  1. 方法2:html5 async属性
    由题可知,需要支持html5的浏览器,并且只支持外部脚本(src)

    1
    <script type="text/javascript" src="myjavascript.js" async="async"></script>
  2. 方法3:script标签的defer属性
    w3school原文:
    HTML script 标签的 defer 属性:
    defer 属性规定是否对脚本执行进行延迟,直到页面加载为止。
    有的 javascript 脚本 document.write 方法来创建当前的文档内容,其他脚本就不一定是了。
    如果您的脚本不会改变文档的内容,可将 defer 属性加入到 script 标签中,以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本,它将推迟对脚本的解释,直到文档已经显示给用户为止。
    只有 Internet Explorer 支持 defer 属性。

    1
    2
    3
    <script type="text/javascript" defer="defer">
    alert(document.getElementById("p1").firstChild.nodeValue);
    </script>

HTML 5 script defer 属性:
defer 属性规定当页面已完成加载后,才会执行脚本。
注释:defer 属性仅适用于外部脚本(只有在使用 src 属性时)。
注释:有多种执行外部脚本的方法:
如果 async=”async”:脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
如果不使用 async 且 defer=”defer”:脚本将在页面完成解析时执行
如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本

1
<script type="text/javascript" src="demo_defer.js" defer="defer"></script>
  1. 方法4:动态创建script
    应该是兼容所有浏览器的。
    1
    2
    3
    4
    5
    6
    7
    (function(){
    var scripts = document.createElement('script');
    scripts.type = 'text/javascript';
    scripts.src = "myjavascript.js";
    var temp = document.getElementsByTagName('script')[0];
    temp.parentNode.insertBefore(scripts, temp);
    })();