zoukankan      html  css  js  c++  java
  • js异步加载的3种方式(转载)

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

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


    2.async(async 属性是 HTML5 中的新属性。)

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

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


    3.创建script,插入到DOM中,加载完毕后callBack;

    function loadScript(url, callback){
        var script=document.creatElment("script");
        script.type="text/javascript";
        if(script.readyState){  ie
             script.onReadyState=function(){
                 if(script.readyState ="load" || script.readyState = "complete"){
                      script.onReadyState=null;
                      callback();
                }else{
                   script.onload=function(){
                       callback();
                     }
                }
            }
          }
        script.src=url;
        document.body.appendChild(script);
    }        
  • 相关阅读:
    Vue如何下载文件?
    vue用template还是JSX?
    2020年的第一件事,我取关了97个公众号
    月经贴 | 2019.12
    CSS——盒子模型(含详解)
    CSS——字体、文本、背景属性设置
    CSS——选择器(三大特性)
    CSS——选择器(本篇介绍八类多种)
    CSS——简介
    WEB前端——body内常用标签(form标签)
  • 原文地址:https://www.cnblogs.com/zhangym118/p/6000621.html
Copyright © 2011-2022 走看看