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树已经构建完成了。
分类:
javascript
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· 深度对比:PostgreSQL 和 SQL Server 在统计信息维护中的关键差异