【前端】打开网站时loading是怎么判断资源是否加载完的？
经常打开网页看到loading，但是想知道网站怎么判断资源是否加载完的？还有就是京东那样的，不是整个页面loading，而是分块loading，下拉的时候就能看出来,这个是怎么实现的呢？
回答
首先告诉你一下， 你说的2种情况（初始化loading，分块loading）都是手动的， 而不是自动的。
先说分块加载， 比如有场景：滚动条滚到某处，触发读取下一页数据， 读取到下次需要加载的图片url， 先读好图片再把界面显示出来。
全局也是一样的，比如有3个图片很大， 如果直接显示页面让用户看到图一点点刷出来体验不好， 就预先读取图片，读完再把loading的遮罩层去了， 写个简单的伪代码：
var loading = true;//loading状态， 显示遮罩var imgs = ['url1','url2','url3'];//可能从配置或者接口读取的var total = imgs.length;//总共需要读取的图片var process = 0;//读取进度var loaded = 0;//已读取imgs.forEach(function(url){ var img = document.createElement('img');
img.src = url;
img.onload = function(){
process = loaded++/total; if(process == 1) {
loading = false;//取消遮罩层， 现在3个大图片都已经显示完整了
}
}
})
比如我网站里有100张图片作为资源，那么每加载完一张图片我就计数，知道计数达到了100就表示资源都加载完了。
不知道你是要从哪个层面上去知道是否加载完？
js里面有一个onload，页面加载完后会执行这个方法。
你说的京东的那个使用的AJAX异步加载
延迟加载，原理很简单。就是监听滚动事件，图片的话就监听图片，分块加载就监听分块的容器。占位符放loading图片，具体实现看需求，可ajax异步获取数据，可服务端直吐数据到前端，买QQ账号平台地图前端判断滚动到位置时做HTML替换。
用AJAX是这么办的=。=
success: function (result) {
$('#loading').hide();
$('.loading-area').hide();
$('.clerk-list').show(); if(result.result || result.rows) {
that.createHtml(result.rows); // 返回的数据少于限制数，不需要再进行加载
if (result.rows.length < limit) {
$(window).off("scroll", that.loadDataOnBottom);
$('#nomore').show();
} else { // 重新绑定滚动加载
start += result.rows.length;
$(window).scroll(that.loadDataOnBottom);
}
} else {
$('#nomore').show();
}
}
判断资源加载完成是onLoad方法, 再告诉你一个判断dom结构绘制完毕是jquery的document.ready
分块loading,你去搜jquery延迟加载就都知道了
更多相关文章
- 【前端】在electron使用ckplayer播放rtmp在开发环境可以播放，打包
- vue_3
- adminlte框架后台模板分块
- 动态分页制作及composer自动加载及第三方验证码使用
- 补0817：域名空间内类实现自动加载，use的作用 及 mysql数据库DDL,D
- 08-11 作业 面对对象和自动加载 封装 继承 多态
- 命名空间自动加载进阶与mysql初体验
- mysql语句、类的自动加载与引用
- 总结mysql 常用DDL, DML语言并实操与use在命名空间中的作用及实