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>
</product-item>
<!-- 这个人家项目也不是开源……截取部分代码看看 意思意思 -->
不出意料～看来还要去挖product-item这个业务组件才行～
<div class="product-item">
<h3 class="title-zh product-item_loading" :style="width()" v-else="">加载中</h3>
</h4>
</div>
methods: {
width: function() {
return {
width: parseInt(30 * Math.random() + 60, 10) + "%"
}
}
}
果然……随机的……如果有数据就显示数据 else情况显示加载中并且随机给个灰条～机智-_-#
好了我要去给我的数据买裤衩了++
ps:随着vue2.0 ssr的到来～越来越难挖了^^好事～
