JS延迟加载

JS延迟加载的几种方法:

利用定时器

    利用定时器,延迟一定的时间后再引入js文件,给html的加载和渲染留出时间
    setTimeout(function(){
       document.getElementById(‘my').src='demo.js';
    } “,3000);//延时3秒后执行 

defer 属性

    加上 defer 等于在页面完全载入后再执行
    <scriptsrc="demo.js" defer></script>

async 属性

    js文档一旦下载完毕就会立刻执行,所以可能是不按照页面引入的顺序执行。
    <scriptsrc="file.js" async></script>  

动态创建DOM方式

    监听load事件,当load事件触发的时候就动态加载js文件
   <script type="text/javascript">  
       function downloadJSAtOnload() {  
           varelement = document.createElement("script");  
          element.src = "defer.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>  

使用jQuery的getScript()方法

    通过回调函数来延迟加载js文件,回调函数时获取到demo.js后执行的代码
    $.getScript("demo.js",function(){
      console.log("脚本加载完成")  
    });  

在html底部加载js文件

    html是从上到下执行的,所以在</body>的前面引入js文件,js文件获取到执行的时候,DOM树已经构建完成了。
posted @   rainbow8590  阅读(2093)  评论(0编辑  收藏  举报
编辑推荐:
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
阅读排行:
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· 深度对比:PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
点击右上角即可分享
微信分享提示