Skeleton Screen加载占位图(内容出现前显示灰色占位图)的分析与实现

今天有几个好友问了这个叫加载占位图的实现方法,我还在此问题下做了个回答.
由于国内对这个的名词是各有各的叫法,所以这里直接用加载占位图来解释.
相信很多人都看到过图中这样的加载方式:

这个图是一个国内知名站点的,相比以往的loading圈圈,看起来是不是美观了许多.
据说这个Idea是一个谷歌工程师在2013年时想到的.我不喜欢去讨论概念之类.直接用知名站点来通俗易懂的解释:

以往:发起ajax-loading.gif/svg-ajax结果.
现在:发起ajax-具有css3动感(比如闪烁)的灰色布局div-ajax结果

不用ajax也没关系,css3的‘:before‘也是没问题的,总之目的是要代替loading动图.

这里有一段下文这个图获得ajax响应前的结果,它在获得回调前用了这段代码:

<div>
    <div class="split-line">
    </div>
    <div class="top-title">
        <span>热门专题</span>
    </div>
    <div class="recommend-collection">
<span class="collection-loading" style="width: 72px;"></span>
<span class="collection-loading" style="width: 66px;"></span>
<span class="collection-loading" style="width: 63px;"></span>
<span class="collection-loading" style="width: 53px;"></span>
<span class="collection-loading" style="width: 61px;"></span>
<span class="collection-loading" style="width: 48px;"></span>
<span class="collection-loading" style="width: 71px;"></span>
<span class="collection-loading" style="width: 59px;"></span>
    </div>
</div>


那么,这么聪明的你应该学会了如何实现它了吧?
看起来很炫的东西,往往都是很简单的.

原文地址:https://www.cnblogs.com/baimeishaoxia/p/12207699.html

时间: 2024-10-04 02:56:57

Skeleton Screen加载占位图(内容出现前显示灰色占位图)的分析与实现的相关文章

在aspx页动态加载ascx页面内容,给GridView控件绑定数据

在aspx页动态加载ascx页面内容 //加载ascx页面内容Control c1 = this.Page.LoadControl("WebUserControl1.ascx");//绑定到aspx页的PlaceHolder控件上PlaceHolder1.Controls.Add(c1); DataSet ds = SqlServerHelpr.GetDataSet("select * from dbo.Table_1");//给GridView控件绑定数据Grid

YARN加载本地库抛出Unable to load native-hadoop library解决办法

YARN加载本地库抛出Unable to load native-hadoop library解决办法 用官方的Hadoop 2.1.0-beta安装后,每次hadoop命令进去都会抛出这样一个Warning WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform... using builtin-java classes where applicable 设置logger级别,看下具体

winform 加载窗体时弹出另一个窗体并显示进度条的源码

winform 加载窗体时弹出另一个窗体并显示进度条的源码 //frmA: 源窗体 //------------------------------------------ //引用 using System.Threading; BackgroundWorker worker; public frmA() { InitializeComponent(); worker = new BackgroundWorker(); worker.DoWork += new DoWorkEventHandl

jQuery:实现图片按需加载的方法,当要显示内容的高度超过了页面的高度,按需加载,根据滚动条的位置来判断页面显示的内容

实现图片按需加载的方法,当要显示内容的高度超过了页面的高度,按需加载,根据滚动条的位置来判断页面显示的内容 这个类似于京东或淘宝页面,根绝页面的滚动,显示下面的内容 如下图所示,一开始并不是所有的图片都显示,当滚动条移动到页面最下面的时候,再显示下面的内容 解决思路:通过判断滚动条是否滚动到了页面的最下面,如果滚动到了页面的最下面,则重新加载图片 知识点:1.offset() 方法返回或设置匹配元素相对于文档的偏移(位置) 返回第一个匹配元素的偏移坐标. 该方法返回的对象包含两个整型属性:top

代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)

代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到合意的,所以根据网上找的一段代码,进行了较大改动. 需引用 zepto 或 jquery. 我这个是应用于手机上的,两列瀑布流,图片高度未知——等图片的onloaded事件触发后,才对容器进行计算和定位. 大容器是 $("#imgList"),容器格子是$(".pin"

Android 加载gif图片强大框架(支持预加载、缓存,还支持显示静态图片,一行代码全搞定)

之前项目中没有涉及到显示gif图片的功能,也没有着重研究过,最近项目中要用到显示gif图片,于是就在网上一顿搜,用过之后发现如下几个缺点. 1.加载大的gif图片会出现oom. 2.没有预加载和缓存功能,比较消耗内存. 3.功能比较单一,显示gif了但是不能显示静态图片. 最后无意间发现了一个强大的gif加载框架,能够满足上面的所有缺陷,支持预加载和缓存,同时支持显示静态图片和gif图片.下面是一些源代码: //xml布局就是一个ImageView //在需要的地方直接调用 Glide.with

基于layer封装的异步加载分部视图弹出层

背景:之前一直用的artdialog,但是样式不是很好看,后来偶然看到layer,觉得不错,但是对于.net mvc来说,不能像artdialog一样弹出分部视图是很难受的.所以下面的方法就解决了. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta na

Unity实现场景加载渐入渐出效果

项目中要用到加载场景的时候有个渐入渐出的效果,做了一下,跟大家分享 首先,创建两个场景Main和Game场景: 其次,在Main场景中创建FandeScene.cs脚本,创建Fade空对象,挂载,给一张黑色的图片,拖成预设体,同样也拖到Game场景中. using UnityEngine; using System.Collections; public class FadeScene : MonoBehaviour {     public Texture blackTexture;     

react16.8 antd按需加载配置(已经弹出和未弹出分别的配置)

误区,antd按需加载同样是需要先安装antd,只是通过插件的配置实现不用再进行样式的引入,可以直接引用antd组件进行开发 怎样判断按需加载配置成功?通过组件引用的判断,在不引入antd样式的前提下,直接引入,使用组件,看组件样式是否有效,如果生效则按需加载配置成功 完成的配置流程 安装antd npm i antd --save 安装babel-plugin-import插件 npm -s install babel-plugin-import 配置webpack,因为现在的时候,我的web