首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

做好 Loading 设计

Loading 的产生是为了在网络请求中优化用户的使用体验。 反过来看,Loading 动画能够为网络访问提供更多的加载时间,提高用户的转化率。...也就是说 loading 是为了缓解加载延迟提供的一个视觉\交互方案,形成一个连贯的视觉体系。 Loading 设计在不同实用场景下有不同的最优方案: 2. 加载模式分类 2.1 骨架屏 ?...样例: 网易新闻图片 loading 对于内容量较多的加载需求场景(比如:新闻,博客),本身数据查询时间不是耗时瓶颈。瓶颈在于图片等资源大小,因此更多的是分开加载。...一开始返回的页面带有完整的文字信息,图片用矩形框填充占位,矩形框内显示 loading。待图片、视频等大资源加载完成之后再替换图片。 2.3 全屏加载 ?...真正理想的情况不是有好的 Loading,而是没有 Loading

1.4K20

说说Loading这件小事

不管是从最早的原生JavaScript还是到现在的React、Vue,只要有页面的地方就有loading,似乎loading是一个前端同学永远也绕不过去的坎。...之所以说是坎,因为在页面中对于loading的控制,确实让前端工程师比较头疼,但大家似乎对于loading很多时候也不是那么在意,可有可无,也放在最后优化。...本篇文章,我们从loading的分类、需求产生、视觉状态、生命周期几个方面介绍一下loading。...从loading的作用范围大致分为3类 全局loading 单页面loading 局部loading 首先对于全局loading比较常见,尤其是在C端,小屏幕设备上,在后端请求没有完全返回来之前, 或者前端页面没有完全加载完...视觉状态 静态 动态 生命周期 对于全局loading是要在页面最开始的部分加载出,一般会随着页面的根HTML出现,以最高优先级和速度呈现出来,不管是jQuery中用show,hide控制显示与否,或者是

96720

uni-app+猫框多图异步上传与显示loading的解决方案

学完文件上传之后,我们需要做多图上传,我们显示Loading 加载中,一般是这样写的 1 显示 加载中 2 上传文件1 3 上传文件2 4 关闭显示 但是JS是异步的,不是按 2>3>4 这样去执行。...现在猫猫给大家一个解决方案:就是利用promise.all来达所有任务执行完成之后,再关闭显示加载中的提示。...Promise.all(task).then((result) => { uni.hideLoading() ; console.log(result) //方案一:全部成功再显示...方案二:成功一条,显示一条 result.forEach(function(row,index){ that.imageList.push(serverurl+"img/"+row.file1)...","errorMsg":"ok","success":true,"file1":"文件名"}, ] 有几个任务,就有数组就有几行结果 只要有一条失败,就会执行catch的函数 这样就可以很好的加入显示加载中了

1.3K30

Human Interface Guidelines — Loading

自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚 Loading...Human Interface Guidelines链接:loading 内容加载时,空白屏幕或静态屏幕可能会使 app 看起来像冻住了,这会让人困惑和沮丧,并可能导致人们离开app。...Loading ·在发生加载时清楚说明 至少,展示一个表示正在发生的事情的环形loading圈,最好能显示明确的进度,以便用户可以估算出他们将等待多久。 尽快显示内容。...立即显示屏幕,并使用占位符文本、图形或动画来标识内容尚未出现的位置,并在内容加载出来时替换掉这些占位符元素。

66640
领券