遮羞变革-placeholder-loading

---

input placeholder

最早遇见这个词是在html5的新增表单属性里:

placeholder in html5

在css里也有这个 不过还在草案阶段～
看起来就是

input placeholder

---

img placeholder

很早图片就开始应用相关技术，在图片加载的状态上做文章

• 加载中
• 加载失败

• 加载成功

  
  
  

  图片加载中

图片加载失败

---

page placeholder

无非也就是表单来个输入提醒，图片来个加载状态提示，随着h5崛起，单页loading开始普及

页面加载loading

这里我要重点说下……今日头条的文章页loading:

Paste_Image.png

真是智慧-_-#

一张大图……搞定了page-loading和data-placeholder

---

data-placeholder

图片、页面都遮羞了，就剩未渲染上数据的dom漏底裤了
今天聊聊重点 我最感兴趣的data-placeholder,有请我很中意的web产品-小桃酱
这是它们家的数据遮羞布～

Paste_Image.png

由表及里，慢慢看

Paste_Image.png

从页面上 有个好玩的类:product-item_loading
表部分的实现效果很简单就是用的背景色＋透明度
但有一个地方很有意思就是长宽有变化

这个变化是根据数据来的呢？还是随机搞的呢？

目前能知道的就是这个长度绝对不是被字体撑开的
1.所有加载中的条目文字都一样：加载中
2.宽度是用width属性控制的 而且还是内嵌样式
带着疑问 要看下这个组件了～

挖到这个视图组件的名称

Paste_Image.png

找到了$_$

Paste_Image.png

不出意料～看来还要去挖product-item这个业务组件才行～

 
 
    
加载中
 
     
  
 

methods: {
     width: function() {
         return {
              width: parseInt(30 * Math.random() + 60, 10) + "%"
          }
      }
}

果然……随机的……如果有数据就显示数据 else情况显示加载中并且随机给个灰条～机智-_-#

好了我要去给我的数据买裤衩了++
ps:随着vue2.0 ssr的到来～越来越难挖了^^好事～