遮羞变革-placeholder-loading

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

placeholder in html5

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

input placeholder

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

图片加载失败

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

页面加载loading

Paste_Image.png

真是智慧-_-#

一张大图……搞定了page-loading和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的到来～越来越难挖了^^好事～

最后编辑于：2017.12.03 07:26:26

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。