• 黄聪:异步加载JS的4种方式(详解)


    方案1:$(document).ready

    <!DOCTYPE html>
    <html>
            <head>
                    <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> 
                    <script type="text/javascript">
                            $(document).ready(function() {
                                alert("加载完成!");
                            });
                    </script>
            </head>
            <body>
                    <img src="https://images0.cnblogs.com/i/121863/201405/222202573569862.jpg" />
            </body>
    </html>

    点评:

    1、需要引用jquery

    2、兼容所有浏览器。

    方案2:<script>标签的async="async"属性

    async的定义和用法(是HTML5的属性)

    async 属性规定一旦脚本可用,则会异步执行。

    示例: 

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


    点评:

    1、HTML5中新增的属性,Chrome、FF、IE9&IE9+均支持(IE6~8不支持)。此外,这种方法不能保证脚本按顺序执行。

    2、async 属性仅适用于外部脚本(只有在使用 src 属性时)。

    方案3:<script>标签的defer="defer"属性

    defer 属性规定是否对脚本执行进行延迟,直到页面加载为止。 

    有的 javascript 脚本 document.write 方法来创建当前的文档内容,其他脚本就不一定是了。

    如果您的脚本不会改变文档的内容,可将 defer 属性加入到 <script> 标签中,以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本,它将推迟对脚本的解释,直到文档已经显示给用户为止。

    示例:

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

    点评:兼容所有浏览器。此外,这种方法可以确保所有设置defer属性的脚本按顺序执行。

    方案4:动态创建<script>标签

    示例:

    <!DOCTYPE html>
    <html>
            <head>
                    <script type="text/javascript">
                            (function(){
                                    var s = document.createElement('script');
                                    s.type = 'text/javascript';
                                    s.src = "http://code.jquery.com/jquery-1.7.2.min.js";
                                    var tmp = document.getElementsByTagName('script')[0];
                                    tmp.parentNode.insertBefore(s, tmp);
                            })();
                    </script>
            </head>
            <body>
                    <img src="https://images0.cnblogs.com/i/121863/201405/222202573569862.jpg" />
            </body>
    </html>

     点评:兼容所有浏览器。

    推荐使用第一个方案。

  • 相关阅读:
    Visio画出的图,裁剪成固定大小再添加马赛克的方法
    单张PPT转成单张PDF的PDF文件怎么设置打印出一页纸有6页PPT
    MVC下载电子表格到本地((导出表格4-4)
    获取配置文件(导出表格4-3)
    获取随机字符串(导出表格4-2)
    ExcelHelper 电子表格帮助类(导出表格4-1)
    二、操作NPOI_从数据库中导出数据到Excel_支持.xls格式
    一、操作NPOI从Excel中导入数据到SqlServer数据库中_xls格式
    Fetch(Promise微队列) 增删改查
    C#获取枚举的描述
  • 原文地址:https://www.cnblogs.com/huangcong/p/3747038.html
Copyright © 2020-2023  润新知