84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
经常打开网页看到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异步获取数据,可服务端直吐数据到前端,前端判断滚动到位置时做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延迟加载就都知道了
首先告诉你一下, 你说的2种情况(初始化loading,分块loading)都是手动的, 而不是自动的。
先说分块加载, 比如有场景:滚动条滚到某处,触发读取下一页数据, 读取到下次需要加载的图片url, 先读好图片再把界面显示出来。
全局也是一样的,比如有3个图片很大, 如果直接显示页面让用户看到图一点点刷出来体验不好, 就预先读取图片,读完再把loading的遮罩层去了, 写个简单的伪代码:
比如我网站里有100张图片作为资源,那么每加载完一张图片我就计数,知道计数达到了100就表示资源都加载完了。
不知道你是要从哪个层面上去知道是否加载完?
js里面有一个onload,页面加载完后会执行这个方法。
你说的京东的那个使用的AJAX异步加载
延迟加载,原理很简单。就是监听滚动事件,图片的话就监听图片,分块加载就监听分块的容器。占位符放loading图片,具体实现看需求,可ajax异步获取数据,可服务端直吐数据到前端,前端判断滚动到位置时做HTML替换。
用AJAX是这么办的=。=
判断资源加载完成是onLoad方法, 再告诉你一个判断dom结构绘制完毕是jquery的document.ready
分块loading,你去搜jquery延迟加载就都知道了