javascript - 打开网站时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个大图片都已经显示完整了
        }
    }
})

这篇关于javascript - 打开网站时loading是怎么判断资源是否加载完的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！