前端内容占位技术分享

所谓内容占位技术，意思是说在内容比较多，数据量大的情况下，可以事先将一些标签替代它们的位置，等到加载完毕的时候再将其隐藏。注意这和以前的图片懒加载不是一个意思，两个不起冲突，图片懒加载的原理就是事先用一个较小的loading图片，等用户到达这个位置的高度时再去获取相应的数据。内容占位技术就是模拟它可能会显示出来的样子。

比如下面这个页面，不好意思打了马赛克

再还没有加载内容出来时，我们可以这样。

因为是gif的图片，效果并不是特别好，直接把上面代码拷贝到你的文件里面打开。这里只做了一部分（量宽高太麻烦了）

其中代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>dome</title><style>body{width:640px;margin:0 auto;background-color:#fff;}@keyframes placeHolderShimmer{0%{background-position: -640px 0}100%{background-position: 640px 0}}.box {animation-duration: 1s;animation-fill-mode: forwards;animation-iteration-count: infinite;animation-name: placeHolderShimmer;animation-timing-function: linear;background: #f6f7f8;background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);background-size: 800px 104px;position: relative;height:100vh;}[class^="box-"]{position:absolute;background-color:#fff;}.box-bar-0{left:60px;top:0;width:10px;height:50px;}.box-bar-1{left:60px;top:0;width:calc(100% - 50px);height:20px;}.box-bar-2{left:60px;top:calc(60px - 25px);width:calc(100% - 50px);height:20px;}.box-bar-3{right: 0;top: 20px;width: 25%;height: 16px;}.box-bar-4{left: 0;top: 50px;width: 100%;height: 16px;}.box-bar-5{left: 110px;top: 66px;width: 20px;height: 132px;}.box-bar-6{left: 110px;top: 86px;width: calc(100% - 110px);height: 10px;}.box-bar-7{left: 220px;top: 98px;width: 300px;height: 10px;}.box-bar-8{left: 110px;top: 110px;width: calc(100% - 110px);height: 48px;}.box-bar-9{left: 272px;top: 166px;width: calc(100% - 110px);height: 12px;}.box-bar-10{left: 272px;top: 184px;width: calc(100% - 110px);height: 12px;}</style>
</head>
<body><div class="box"><div class="box-bar-0"></div><div class="box-bar-1"></div><div class="box-bar-2"></div><div class="box-bar-3"></div><div class="box-bar-4"></div><div class="box-bar-5"></div><div class="box-bar-6"></div><div class="box-bar-7"></div><div class="box-bar-8"></div><div class="box-bar-9"></div><div class="box-bar-10"></div></div>
</body>
</html>

代码的原理其实很简单，就是用一个大盒子把里面的子盒子包起来，这个大盒子的作用就是那个闪烁效果以及默认背景颜色，其他子标签的作用就是把不是内容的用白色盖住默认背景。

恭喜你看完了，能看下来也是不错的。

前端内容占位技术分享相关推荐

ssm框架用html视图,ssm框架是前端还是后端技术分享
ssm框架中前端jsp页面的数据除了表单提交以外如何ssm框架里面,前端页面的数据是怎么绑定的,如果我不用表单提交的话. 刚学完了ssm框架和ajax 可以写一个什么项目比较简求一个java比较简单 ...
android 朗读推送内容,Android技术分享-文字转语音并朗读
最近在做一个项目,其中有一个功能是需要将文本转换成语音并播放出来.下面我将我的做法分享一下. 非常令人开心的是,Android系统目前已经集成了TTS,提供了相关的库供我们进行调用,不必到处去搜寻第三 ...
好程序员web前端技术分享媒体查询
为什么80%的码农都做不了架构师?>>> 好程序员web前端技术分享媒体查询什么是媒体查询媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向 ...
【华为云技术分享】三大前端技术(React,Vue,Angular)探密（下）
[华为云技术分享]三大前端技术(React,Vue,Angular)探密(上) [Angular] Angular(通常被称为 "Angular 2+"或 "Angula ...
前端技术分享之HTMLHTML5
前端技术分享之HTML&&HTML5 HTML 发展历史 HTML文档模式标准模式 HTML 4.01 严格型 XHTML 1.0 严格型 HTML 5 准标准模式 HTML 4.0 ...
技术分享 | 混合云模式下SaaS端前端最佳实践
导读:集成开放平台采用的是混合云部署架构,包含两个大的组件,管理控制台和引擎.管理控制台是SaaS的,部署在公有云,按租户隔离.引擎部署在客户私有云.一套SaaS版的管理控制台如何适配不同客户的引擎, ...
技术分享 | 一条神奇的曲线——贝塞尔曲线在前端的应用
源宝导读:在前端的开发中我们经常会遇到利用贝塞尔曲线帮助我们完成前端的动画和图形绘制,但是对其中的一些参数配置是一头雾水.本文将从贝塞尔曲线的原理讲起,由浅入深剖析一阶到多阶贝塞尔的实现原理,最后从三 ...
20210323第一家量产国产化蓝牙AOA高精度定位基站生态合能培训会上海站现场直播下午内容视频录像回放-深圳核芯物联原厂工程师罗良技术分享
20210323第一家量产国产化蓝牙AOA高精度定位基站生态合能培训会上海站现场直播下午内容视频录像回放-深圳核芯物联原厂工程师罗良技术分享作为国内第1家正向自主研发量产2.4G AOA/蓝牙AOA ...
30个前端技术分享主题
这是我们团队前30期的前端内部技术分享主题,我做的是第1.10.19期的分享,仅供大家参考
一个研发团队是如何坚持7年技术分享的？
--"所有分享都是有意义的" --"在PingCode,人人都可以成为分享者" 这是PingCode研发团队的分享精神,而这样的精神,在过去7年中已经闪耀了10 ...

前端内容占位技术分享

前端内容占位技术分享相关推荐

最新文章

热门文章