移动端的加载问题

Question

请问在页面加载比较慢的情况下，页面没有还未加载出来，有些网站的页面进行了如下图所示的处理，文章内容的大致轮廓出来了。请问这是什么操作，前端该怎么实现这个功能？麻烦知道的解答下，谢谢

Answer 1

关键词 骨架屏，可以搜下具体实现方式

Answer 2

这是一种加载中的骨架屏提示，相比一个圈圈一直在转，这种加载中的提示能更加直观地让用户感知到内容的结构布局，等数据加载过来之后，再替换成真实的文字和图片，中间的过渡也会更加平和。

个人觉得，这种设计比较新颖，比较适合列表式轻微复杂结构的显示。据我观察，有很多网站和app都使用了这种方式，比如：饿了么H5端，QuoraAPP，支付宝APP 等。

这种功能，对前端来说，最简单的实现，就是按照你想要的结构来用div 填充，加上背景色之类的。

之前回答过一个类似的问题，还有代码，现在找不到了。

我最近也在考虑用 canvas 或 svg 写一个这种插件，来做这种加载中的提示。写好了之后，可以再推荐你试试。

Answer 3

骨框架，饿了吗就是这样的

Answer 4

骨架图 也就是预加载

适用范围：前后端分离模式下 通过接口形式请求数据， 因 请求造成的延迟性，为提高用户体验度

对于对seo有要求的页面，我司都是通过后端模板引擎做输出的， 因此并不太适合做预加载处理

以上是个人看法，欢迎指正