啥是骨架屏

article/2025/9/15 4:51:00

（一）什么是骨架屏

骨架屏可以理解为是当数据还未加载进来前，页面的一个空白版本。在页面完全渲染完成之前，用户会看到一个样式简单，描绘了当前页面的大致框架的页面，然后骨架屏中各个占位部分被实际资源完全替换，这个过程中用户会觉得内容正在逐渐加载即将呈现，降低了用户的焦躁情绪，使得加载过程主观上变得流畅。（先占位，内容逐渐呈现）

简单来说，骨架屏就是在页面内容未加载完成的时候，先使用一些图形进行占位，待内容加载完成之后再把它替换掉。

骨架屏会在感官上觉得内容出现的流畅而不突兀，体验更加优良。

（二）图片

（三）骨架屏用途

  1. 作为spa中路由切换的 loading, 结合组件的生命周期和ajax请求返回的时机来使用.（ 作为loading 使用）。作为与用户联系最为密切的前端开发者，用户体验是最值得关注的问题。关于页面loading状态的展示，主流的主要有loading图和进度条两种。除此之外，越来越多的APP采用了“骨架屏”的方式去展示未加载内容，给予了用户焕然一新的体验。
  2. 作为首屏渲染的优化

（四）一个简单的骨架屏模拟

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><link href="https://cdn.bootcss.com/weui/2.1.2/style/weui.min.css" rel="stylesheet" /><title>Skeletons</title><style>img {width: 100%;}.media-box-img {width: 60px;height: 60px;}/* 阻止Skeletons点击事件 */.pointer-stop {pointer-events: none;}/* Skeletons效果 */.skeletons {position: relative;display: block;overflow: hidden;height: 100%;min-height: 20px;background-color: #ededed;}.skeletons:empty::after {display: block;content: '';position: absolute;width: 100%;height: 100%;-webkit-transform: translateX(-100%);transform: translateX(-100%);background: linear-gradient(90deg, transparent, rgba(216, 216, 216, 0.753), transparent);-webkit-animation: loading 1.5s infinite;animation: loading 1.5s infinite;}@-webkit-keyframes loading {100% {-webkit-transform: translateX(100%);transform: translateX(100%);}}@keyframes loading {100% {-webkit-transform: translateX(100%);transform: translateX(100%);}}</style></head><body><div class="weui-panel weui-panel_access"><div class="weui-panel__hd"><span class="weui-panel-title skeletons"></span></div><div class="weui-panel__bd"><a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg pointer-stop"><div class="weui-media-box__hd"><div class="media-box-img skeletons"></div></div><div class="weui-media-box__bd"><div class="weui-media-box__title skeletons"></div><p class="weui-media-box__desc"><span class="media-box-desc skeletons"></span></p></div></a></div></div><script>function renderCard() {var cardImage = document.querySelector('.weui-panel-title')cardImage.textContent = '标题'cardImage.classList.remove('skeletons')var listData = [{img:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg==',desc: '内容内容内容内容'}]var html = ''var cardImage1 = document.querySelectorAll('.media-box-img')var cardImage2 = document.querySelectorAll('.weui-media-box')var cardImage3 = document.querySelectorAll('.weui-media-box__title')var cardImage4 = document.querySelectorAll('.media-box-desc')for (var i = 0; i < listData.length; i++) {cardImage2[i].classList.remove('pointer-stop')cardImage1[i].classList.remove('skeletons')cardImage3[i].classList.remove('skeletons')cardImage4[i].classList.remove('skeletons')cardImage1[i].innerHTML = "<img src='" + listData[i].img + "' />"cardImage3[i].innerHTML = '一段标题'cardImage4[i].innerHTML = '一段描述'}}setTimeout(function() {renderCard()}, 4000)</script></body>
</html>

 


http://chatgpt.dhexx.cn/article/rHLcjjC1.shtml

相关文章

前端骨架屏方案与实践

前端骨架屏方案与实践

对于依赖接口渲染的页面&#xff0c;在拿到数据之前页面往往是空白的&#xff0c;为了提示用户当前正在加载中&#xff0c;往往会使用进度条、loading图标或骨架屏的方式。 对于前两种方案而言&#xff0c;实现比较简单&#xff1b;本文主要研究骨架屏的实现方案。 骨架屏(Ske…
阅读更多...
网页骨架屏自动生成方案（dps）

网页骨架屏自动生成方案（dps）

来源&#xff1a;花满楼 https://zhuanlan.zhihu.com/p/74403911 什么是骨架屏&#xff1f; 什么是骨架屏呢&#xff1f;骨架屏(Skeleton Screen)是指在页面数据加载完成前&#xff0c;先给用户展示出页面的大致结构&#xff08;灰色占位图&#xff09;&#xff0c;在拿到接口数…
阅读更多...
骨架屏

骨架屏

&#xff08;一&#xff09;什么是骨架屏 骨架屏可以理解为是当数据还未加载进来前&#xff0c;页面的一个空白版本。在页面完全渲染完成之前&#xff0c;用户会看到一个样式简单&#xff0c;描绘了当前页面的大致框架的页面&#xff0c;然后骨架屏中各个占位部分被实际资源完…
阅读更多...
Vue中实现骨架屏的多种方式

Vue中实现骨架屏的多种方式

vue-cli项目首页加载缓慢想要使用骨架屏效果&#xff0c;经过几天的实践&#xff0c;这里学习并记录一下vue项目自动生成骨架屏方法。 前言&#xff1a;骨架屏的作用主要是在网络请求较慢时&#xff0c;提供基础占位&#xff0c;当数据加载完成&#xff0c;恢复数据展示。这样给…
阅读更多...
骨架屏原理——面试别再被挨打了

骨架屏原理——面试别再被挨打了

目录 前言 骨架屏是什么 骨架屏原理 用途&#xff1a; &#xff08;一&#xff09;简单实现 &#xff08;二&#xff09; vue项目中的构建 &#xff08;三&#xff09;自动化方案 前言 同样是之前练手项目中的&#xff0c;emmm,知道干嘛用的&#xff0c;没了解过具体原理…
阅读更多...
性能测试总结之内存泄露和内存溢出

性能测试总结之内存泄露和内存溢出

刚刚做完了一个项目的性能测试&#xff0c;“有幸”也遇到了内存泄露的案例&#xff0c;所以在此和大家分享一下。 主要从以下几部分来说明&#xff0c;关于内存和内存泄露、溢出的概念&#xff0c;区分内存泄露和内存溢出&#xff1b;内存的区域划分&#xff0c;了解GC回收机…
阅读更多...
内存泄露与内存溢出的区别及解决方法

内存泄露与内存溢出的区别及解决方法

内存溢出与泄露的区别 内存溢出 out of memory&#xff0c;是指程序在申请内存时&#xff0c;没有足够的内存空间供其使用&#xff0c;出现out of memory&#xff1b;比如申请了一个integer,但给它存了long才能存下的数&#xff0c;那就是内存溢出。 内存泄露 memory leak&…
阅读更多...
jvm故障 内存泄露和内存溢出总结

jvm故障 内存泄露和内存溢出总结

目录 内存泄漏memory leak 内存泄漏的分类&#xff08;按发生方式来分类&#xff09; 内存泄露的场景 静态集合类 / 长生命周期的对象持有短生命周期对象的引用 / 单例模式 /类加载器 各种连接&#xff0c;如数据库连接、网络连接和IO连接等 变量不合理的作用域 内部类持…
阅读更多...
JVM——内存泄漏与内存溢出

JVM——内存泄漏与内存溢出

内存泄漏与内存溢出 1. 面试题 什么是内存泄漏和什么是内存溢出 (陌陌) Java存在内存泄漏吗&#xff0c;内存泄漏的场景有哪些&#xff0c;如何避免(百度) Java 中会存在内存泄漏吗&#xff0c;简述一下&#xff1f;(猎聘) 内存泄漏是怎么造成的&#xff1f;(拼多多、字节跳动)…
阅读更多...
Java中内存溢出和内存泄露详解

Java中内存溢出和内存泄露详解

1、内存溢出&#xff08;OOM&#xff09; 在程序中导致程序崩溃的两种原因有&#xff1a; ①、空指针、下标越界等异常&#xff0c;这类问题主要原因是因为代码写的有问题 ②、还有一类问题是&#xff0c;代码看着也没有问题&#xff0c;在进行GC时&#xff0c;回收也没有空出足…
阅读更多...
内存泄漏和内存溢出的区别

内存泄漏和内存溢出的区别

内存泄漏就是在jvm堆中生成的对象&#xff0c;经过垃圾回收器回收后也无法得到有效的释放&#xff0c;则会导致可用的虚拟机可分配的内存越来越少。最终可能导致内存溢出。 以发生的方式来分类&#xff0c;内存泄漏可以分为4类&#xff1a; 1、常发性内存泄漏。发生内存泄漏的…
阅读更多...
什么是内存泄漏和内存溢出

什么是内存泄漏和内存溢出

目录 一、内存溢出 (OutOfMemory)二、内存泄漏 (Memory Leak) 一、内存溢出 (OutOfMemory) 它是指程序在申请内存时&#xff0c;没有足够的内存空间供其使用&#xff0c;抛出OutOfMemory异常。 比如申请了一个8MB空间&#xff0c;但是当前内存可用空间只有5MB&#xff0c;那么…
阅读更多...
内存溢出和内存泄漏

内存溢出和内存泄漏

内存溢出&#xff1a; 一、内存溢出相对于内存泄漏来说&#xff0c;尽管更容易被理解&#xff0c;但是同样的&#xff0c;内存溢出也是引发程序崩溃的罪魁祸首之一。 二、由于GC一直在发展&#xff0c;所有一般情况下&#xff0c;除非应用程序占用的内存增长速度非常快&#…
阅读更多...
Vim替换命令substitute介绍

Vim替换命令substitute介绍

原文地址&#xff1a;再谈Vim substitute替换命令-Vim入门教程(54) 在Vim替换命令一文介绍过&#xff0c;substitute 命令的语法格式为&#xff1a;:[range]s[ubstitute]/{pattern}/{string}/[flags]。 [flags] 表示可选的标志位&#xff0c;常用的包括 g、c、n、e 等。其中&…
阅读更多...
VIM替换命令%s

VIM替换命令%s

[rootlocalhost 09:03:42 /home/test]# cat vim_test.txt linux nginx aabb bbcc ccdd vim vim_test.txt 进入编辑模式 输入指令 :%s/bb/zz/gc 全局替换&#xff0c;带确认 按y对搜索项替换第一个 按y对搜索项替换第二个 这种操作方法 &#xff0c;查看替换过程与效果。避…
阅读更多...
八皇后问题c语言算法

八皇后问题c语言算法

目录 [TOC] 问题分析&#xff1a; 相信八皇后规则的问题&#xff0c;大家都很熟悉&#xff0c;接下来是如何分析回溯法的应用。回溯法与图里面的深度优先遍历非常的类似&#xff0c;就是&#xff0c;在满足题目条件时候&#xff0c;它总是优先选择第一个&#xff0c;当不满足…
阅读更多...
八皇后算法

八皇后算法

两个皇后都不能处于同一行、同一列或同一斜线上 讨论如果是八个皇后&#xff0c;即存在于8*8的行列式中&#xff0c;每行每列一定存在一个皇后&#xff0c;现在我们用queen[row]col 表示在第row行的皇后处于第col列&#xff0c; 位置的选定&#xff0c;5人 然后判断此时皇后所…
阅读更多...
【算法】八皇后问题

【算法】八皇后问题

1. 问题描述 在 8 * 8 的国际象棋棋盘上摆放八个皇后&#xff0c;任意两个皇后不能处于同一行、同一列或同一斜 线上&#xff0c;请求出所有的摆法。 2. 算法描述 用回溯算法来考虑此问题&#xff0c;在放置皇后之前判断该位置是否会产生冲突。有冲突就继续判断 下一个位置&…
阅读更多...
八皇后问题算法解析

八皇后问题算法解析

八皇后问题&#xff0c;是一个古老而著名的问题&#xff0c;是回溯算法的典型案例。 该问题是国际西洋棋棋手马克斯贝瑟尔于1848年提出&#xff1a;在88格的国际象棋上摆放八个皇后&#xff0c;使其不能互相攻击&#xff0c; 即任意两个皇后都不能处于同一行、同一列或同一斜线…
阅读更多...
用遗传算法解决八皇后问题

用遗传算法解决八皇后问题

一、问题描述 八皇后问题的目标是在国际象棋棋盘中放置8个皇后&#xff0c;使得任何一个皇后都不会攻击到其他任一皇后。(皇后可以攻击和它在同一行&#xff0c;同一列或者同一对角线的任何棋子) 二、编程语言及算法 编程语言&#xff1a;python 算法&#xff1a;遗传算法 …
阅读更多...
推荐文章

Copyright @ 2022~2023