Html检测资源是否加载,【前端】打开网站时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;