javascript - 打开网站时loading是怎么判断资源是否加载完的？

Question

经常打开网页看到loading，但是想知道网站怎么判断资源是否加载完的？还有就是京东那样的，不是整个页面loading，而是分块loading，下拉的时候就能看出来,这个是怎么实现的呢？

Answer 1

首先告诉你一下， 你说的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个大图片都已经显示完整了
        }
    }
})

Answer 2

比如我网站里有100张图片作为资源，那么每加载完一张图片我就计数，知道计数达到了100就表示资源都加载完了。

Answer 3

不知道你是要从哪个层面上去知道是否加载完？
js里面有一个onload，页面加载完后会执行这个方法。
你说的京东的那个使用的AJAX异步加载

Answer 4

延迟加载，原理很简单。就是监听滚动事件，图片的话就监听图片，分块加载就监听分块的容器。占位符放loading图片，具体实现看需求，可ajax异步获取数据，可服务端直吐数据到前端，前端判断滚动到位置时做HTML替换。

Answer 5

用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();
                    }
                }

Answer 6

1. 判断资源加载完成是onLoad方法, 再告诉你一个判断dom结构绘制完毕是jquery的document.ready

2. 分块loading,你去搜jquery延迟加载就都知道了