素材牛VIP会员
打开网站时loading是怎么判断资源是否加载完的?
 Sl***rk  分类:Html5  人气:1041  回帖:6  发布于6年前 收藏

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

讨论这个帖子(6)垃圾回帖将一律封号处理……

Lv5 码农
39***81 PHP开发工程师 6年前#1
  1. 判断资源加载完成是onLoad方法, 再告诉你一个判断dom结构绘制完毕是jquery的document.ready

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

Lv3 码奴
赵***6 Linux系统工程师 6年前#2

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

Lv5 码农
躺***上 技术总监 6年前#3

首先告诉你一下, 你说的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个大图片都已经显示完整了
        }
    }
})
Lv6 码匠
这***生 技术总监 6年前#4

用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();
                    }
                }
Lv2 入门
蒙***生 职业无 6年前#5

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

Lv2 入门
雷***习 技术总监 6年前#6

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

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取