背景

为了使页面加载更快,常常将一些不重要的第三方脚本在页面完成加载后进行懒加载。

// 做一些不影响业务的事情
window.addEventListener('load', () => {
// 懒加载埋点分析
loadScript({
url: 'https://www.domain.com/test.js',
timeout: 10000
}).then(() => {
console.log('ok');
}).catch(console.error);
// 其他
// ...
});

因为 load 事件只会触发一次,如果在懒加载(load)的脚本中又有懒加载的脚本,就会导致内嵌的脚本无法触发。

// 做一些不影响业务的事情
window.addEventListener('load', () => {
window.addEventListener('load', () => {
// 不能执行了
console.log('我无了');
});
});

解决方案

在 HTML 中 document.readyState 属性可以反应当前页面的加载状态。

  • uninitialized - Has not started loading yet
  • loading - Is loading
  • loaded - Has been loaded
  • interactive - Has loaded enough and the user can interact with it
  • complete - Fully loaded

如果属性为 complete 则可认为当前页面已经加载完成。

/**
* 加载完成
* @param timeout {Number} 超时时间 / 单位:秒
* @return {Promise<Boolean>} document is loaded?
*/
function windowLoaded(timeout = 90) {
let loaded, loadFail;
const status = new Promise((resolve, reject) => {
loaded = resolve;
loadFail = reject;
});
if (document.readyState === 'complete') {
loaded('complete');
} else {
window.addEventListener('load', () => loaded('load'));
}
// 超过 timeout 秒后加载失败
setTimeout(() => loadFail('timeout'), timeout * 1000);
return status;
} // load
windowLoaded()
.then(res => {
console.log(res);
})
.catch(console.error);

参考

HTML DOM readyState Property

What is the non-jQuery equivalent of '$(document).ready()'?

PerformanceTiming.loadEventEnd

Window: load event

版权声明

本博客所有的原创文章,作者皆保留版权。转载必须包含本声明,保持本文完整,并以超链接形式注明作者后除和本文原始地址:https://blog.mazey.net/1994.html

如何知道 window 的 load 事件已经触发的更多相关文章

  1. JQuery 在$(window).load() 事件中 不运行 $(window).resize()

    本文转载至: http://stackoverflow.com/questions/2597152/jquery-window-resize-doesnt-work-on-load 原文标题   :J ...

  2. vb.net WPF webbrowser window.close 关闭后不触发 WindowClosing 事件 WNDPROC解决方式

     vb.net WPF webbrowser window.close 关闭后不触发 WindowClosing 事件 WNDPROC解决方式 #Region "WPF 当浏览器窗体关闭 ...

  3. vue -vantUI tab切换时 list组件不触发load事件解决办法

    最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...

  4. jQuery中ready与load事件

    jQuery中ready与load事件(来自慕课网) jQuery有3种针对文档加载的方法 $(document).ready(function() { // ...代码... }) //docume ...

  5. jQuery 的ready事件和 JavaScript 的load事件对比

    为了理解2个事件的异同,先了解一下HTML文档加载顺序 HTML DOM文档加载步骤 HTML DOM文档加载是按顺序执行的,这与浏览器的渲染方式有关,一般浏览器渲染操作的顺序大致按如下几个步骤 1, ...

  6. jquery load ($.load) 事件用法与分析(转)

    首先我们需要清楚的是jquery load方法是对jQuery.ajax()进行封装以方便我们使用的一个方法,当我们需要处理较为复杂的逻辑时候,还是需要用到jQuery.ajax()这个比较全面的方法 ...

  7. jQuery 中ready与load事件

    jquey有3种针对文档加载的方法: //document ready $(document).ready(function(){ //...代码... }) //document ready 简写 ...

  8. doment ready事件和load事件的区别及实现

    从2017年9月至今工作中大部分使用react,前端渲染的一些基础性知识记忆不是很深刻了.面试**公司的时候,碰到"document ready和load的区别,以及document rea ...

  9. 彻底解决低端安卓手机touchend事件不触发(考虑scroll)

    本次移动端开发时遇见了安卓4.2系统不能触发touchend的问题,有以下需求. 1. 横滑轮播图 2.下拉刷新页面内容 3.body滚动条不能失效 开始在轮播图touchmove事件中阻止了浏览器默 ...

  10. jQuery学习一:jQuery中的ready和load事件

    //ready事件 $(document).ready(function(){ 代码........ }); //ready事件简写: $(function(){ 代码........ }); //l ...

随机推荐

  1. django中model聚合使用

    from django.db.models.functions import Cast, Coalesce, Concat, ConcatPair, Greatest # Cast,类型转换 q1 = ...

  2. ZYNQ 裸机模式下修改默认uart端口

    ## 背景 调试ZYNQ 裸机code, 调用 printf()后在UART端口无法看到打印信息输出,查看原理图后发现,板子用的UART 1作为默认串口调试接口,UART 0分配给了RS485使用,因 ...

  3. VIM初使化

    vim ~/.vimrc #设置编码 set encoding=utf-8 fileencodings=ucs-bom,utf-8,cp936 #显示行号 set number #一个tab为4个空格 ...

  4. Codeforces Round 923 (Div. 3)(A~F)

    目录 A B C D E F A #include <bits/stdc++.h> #define int long long #define rep(i,a,b) for(int i = ...

  5. Kubernetes: kube-controller-manager 源码分析

    0. 前言 在 Kubernetes 架构中,controller manager 是一个永不休止的控制回路组件,其负责控制集群资源的状态.通过监控 kube-apiserver 的资源状态,比较当前 ...

  6. es索引数据复制并增加条件和修改目标数据值

    es操作同一个索引里数据的复制语法 复制数据: POST _reindex { "source": { "index": "source_index& ...

  7. mikumikudance 和 pmxEditor 都可以打开 pmx

    mikumikudance 和 pmxEditor 都可以打开 pmx 模型下载 https://www.bilibili.com/blackboard/activity-5hkwDIRkBv.htm ...

  8. Vue mixin 永远不要用!! 极品垃圾,后期维护就剩骂街了~!!

    为什么 Vue mixin 永远不要用!! 极品垃圾,后期维护就剩骂街了~!! vscode 没有自动跳转 自己维护下看看,重构的时候,还得整个复写,相当于整个软件重写 F!!!

  9. sign 单词学习 - 本质:去分开

    sign 英[saɪn],美[saɪn] n. 符号; 指示牌; 手势; 征兆; 正负号; 星座 v. 签名; 签约; 打手语 词源说明(童理民) sign : 来自拉丁语signum,符号,标志,图 ...

  10. vue peek 解决了 vue-template 加载 相对目录 ./components 组件内容 vscode

    点击组件跳转,vue-helper 带@的能跳转,相对目录的不能跳转.vue peek 解决了这个问题.