JavaScript异步加载的4种体式格局

2024年5月12日 166次阅读 来源: 小小赵老汉

原文链接 – http://www.cnblogs.com/huangcong/p/3747038.html

计划一、$(document).ready()

  • 须要引入jquery

  • 兼容一切浏览器

$(document).ready(function() {
    alert("加载完成！");
});

计划二、<script>标签的async="async"属性

  • async属性是HTML5新增属性，须要Chrome、FireFox、IE9+浏览器支撑

  • async属性划定一旦剧本可用，则会异步实行

  • async属性仅适用于外部剧本

  • 此要领不能保证剧本按递次实行

<script type="text/javascript" src="xxx.js" async="async"></script>

计划三、<script>标签的defer="defer"属性

  • defer属性划定是不是对剧本实行举行耽误，直到页面加载为止

  • 假如剧本不会转变文档的内容，可将defer属性加入到<script>标签中，以便加速处置惩罚文档的速率

  • 兼容一切浏览器

  • 此要领能够确保一切设置了defer属性的剧本按递次实行

计划四、动态建立<script>标签

  • 兼容一切浏览器

(function(){
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = "http://code.jquery.com/jquery-1.7.2.min.js";
    var tmp = document.getElementsByTagName('script')[0];
    tmp.parentNode.insertBefore(script, tmp);
})();

（完）

    原文作者：小小赵老汉
    原文地址: https://segmentfault.com/a/1190000008473682
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞