Vue项目添加骨架屏

最新推荐文章于 2024-05-24 15:38:06 发布
最新推荐文章于 2024-05-24 15:38:06 发布
阅读量255 收藏 2
点赞数
分类专栏： Vue 文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wkj1206/article/details/108944286
版权
骨架屏用于解决页面加载时的白屏问题，通过在内容未加载完成时展示图形占位。本文介绍了骨架屏的概念，实现原理，并展示了如何在Vue项目中使用骨架屏插件进行添加。
摘要由CSDN通过智能技术生成

Vue 骨架屏的使用

  1. 为什么使用骨架屏
  2. 骨架屏的实现原理
  3. 实现一个简单的骨架屏
  4. 如何使用骨架屏插件来项目添加骨架屏

什么是骨架屏

由于页面在加载时需要加载许多资源文件和数据，导致页面在显示时有一段时间的白屏或闪烁，所以伪类解决这一问题就出现了骨架屏这一方案。简单来说，骨架屏就是在页面内容未加载完成的时候，先使用一些图形进行占位，待内容加载完成之后再把它替换掉。

骨架屏实现原理

在这里插入图片描述

实现一个简单的骨架屏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <style rel="stylesheet"
最低0.47元/天 解锁文章
wkjCsdn
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue页面骨架屏的实现方法
12-09
在开发webapp的时候总是会受到首屏加载时间过长的影响，主流的解决方法是在载入完成之前显示loading图效果，而一些大公司会配置一套服务端渲染的架构来解决这个问题。考虑到ssr所要解决的一系列问题，越来越多的APP采用了“骨架屏”的方式去提升用户体验。 小米商城： 一、分析Vue页面的内容加载过程 vue项目中的入口index.html只有简单的内容： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <ti
vue 移动端注入骨架屏的配置方法
10-16
然后，创建一个新的Vue项目，如`vue create my-project`。 安装依赖是配置骨架屏的第一步。你需要安装`page-skeleton-webpack-plugin`，这是一个用于生成骨架屏的Webpack插件。在项目根目录下的`package.json`文件...
在vue项目中使用骨架屏
感恩、奋进、自信
05-18 6842
现在的应用开发，基本上都是前后端分离的，前端主流框架有SPA、MPA等，那么解决页面渲染、白屏时间成为首要关注的点 webpack可以按需加载，减小首屏需要加载代码的体积； 使用CDN技术、静态代码等缓存技术，可以减小加载渲染的时长 问题：但是首页依然存在加载、渲染等待时长的问题。那么如何从视觉效果上减小首屏白屏的时间呢？ 骨架屏：举个例子：其实就是在模版文件中id=app容器下面写想要展示的效果，在new Vue(option)之后，该id下的内容就被替换了( 这时候，可能Vue编译生成的内容还没
Vue3骨架屏（Skeleton）
最新发布
Mr Dear的博客
05-24 1079
在需要等待加载内容的位置提供一个占位图形组合，支持：按钮，输入框，图像，头像等占位图；功能丰富，简单易用😁😁
给Vue项目加一个骨架屏吧
yuqing1008的博客
06-14 245
点击上方“前端小苑”，选择“置顶公众号”精品技术文章，热门资讯第一时间送达星期五，你好骨架屏可以理解为是当数据还未加载进来前，页面的一个空白版本，一个简单的关键渲染路径。用户会看到一个...
Vue项目骨架屏注入实践
weixin_33883178的博客
08-19 112
相比于早些年前后端代码紧密耦合、后端工程师还得写前端代码的时代，如今已发展到前后端分离，这种开发方式大大提升了前后端项目的可维护性与开发效率，让前后端工程师关注于自己的主业。然而在带来便利的同时，也带来了一些弊端，比如首屏渲染时间(FCP)因为首屏需要请求更多内容，比原来多了更多HTTP的往返时间(RTT)，这造成了白屏，如果白屏时间过长，用户体验会大打折扣，如果用户网速差，则FCP会更长。 由此...
Vue页面骨架屏
weixin_34280237的博客
05-22 302
在开发webapp的时候总是会受到首屏加载时间过长的影响，主流的解决方法是在载入完成之前显示loading图效果，而一些大公司会配置一套服务端渲染的架构来解决这个问题。考虑到ssr所要解决的一系列问题，越来越多的APP采用了“骨架屏”的方式去提升用户体验。 小米商城： 一、分析Vue页面的内容加载过程 vue项目中的入口index.htm...
Vue页面骨架屏注入方法
08-27
Vue 页面骨架屏注入方法是指在 Vue 项目中实现骨架屏的技术，骨架屏是一种在页面内容未加载完成时，使用一些图形进行占位，待内容加载完成后再把它替换掉的技术。这种技术广泛应用于内容为主的 APP 和网页应用。 为...
vue-cli 构建骨架屏的方法示例
10-17
要使用 Vue CLI 构建骨架屏，首先你需要确保已经安装并配置好了 Vue CLI。如果还没有，可以通过以下命令全局安装： ```bash npm install -g @vue/cli ``` 接下来，你可以创建一个新的 Vue 项目，或者在已有项目中...
vue+webpack骨架屏
01-20
// 在这里替换HTML内容，添加骨架屏 // ... }); }); }; }; ``` ### 插件工作流程 在`apply`方法中，我们监听`html-webpack-plugin-before-html-processing`事件，当这个事件触发时，我们可以修改`...
vue-skeleton:快速实践vue项目骨架屏
05-18
Vue Skeleton 是一个用于快速构建Vue项目骨架屏的工具，它能帮助开发者在页面内容加载时提供即时反馈，提升...通过理解Vue的基本原理和利用Vue-skeleton提供的示例，开发者可以快速地为自己的Vue项目添加骨架屏功能。
（亲测）vue-cli项目添加骨架屏多种方式，自动生成骨架屏
zhouzuoluo的博客
09-06 9633
vue-cli项目首页加载缓慢想要使用骨架屏效果，经过几天的踩坑，这里学习并记录一下vue项目自动生成骨架屏方法。 添加骨架屏，其优势在于： 写于HTML文件中，独立于Vue框架，节省了JS加载时间+JS全局环境创建的执行时间的时间 只在主页面根据页面结构独立编写，预先展示页面结构，进行视觉暂留，提供更好的交互感官 只在页面结构变化时进行修改，维护成本相对较低 骨架屏的作用主要是在网...
vue项目中使用骨架屏组件
^_^
07-17 1453
什么是骨架屏？可以理解为搭建楼房的架子 使用场景 下面是导航和 商品的数据，一开始打开页面的时候肯定是ajax请求数据渲染出来的 但是呢一打开就是空空的一片，影响用户的体验 这时候就用到了骨架屏，骨架屏是什么样的呢？ 在没请求回来数据时，应该先把骨架给用户看 告诉用户 数据马上要回来啦，让用户不会什么页看不到，以为自己电脑卡了重新刷新页面， 接下来手动一个骨架屏 <template> <div class="xtx-skeleton shan"...
Vue中封装一个骨架屏组件
weixin_55690518的博客
09-15 362
骨架屏组件的目的：为了在加载过程中等待效果更好，封装一个骨架屏组件 封装一个组件，做占位使用，这个占位组件有个专业术语：骨架屏组件，暴露一些属性：高、宽、背景、是否有闪动画 skeleton.vue <template> <div class="skeleton" :style="{width,height}" :class="{shan:animated}"> <!-- 1 盒子--> <div class="block" :style
vue项目：优化用户体验之骨架屏
lelehouse的博客
01-15 763
推荐两篇文章 参考：Vue项目骨架屏注入实践：https://www.jianshu.com/p/3da35af1e4c2 参考：为vue项目添加骨架屏https://juejin.im/entry/5ab37beb518825557005eecc
vue 骨架屏组件
阿之阿佐
06-20 1678
注意：如果同学们不使用page-skeleton-webpack-plugin和vue-server-renderer，并且，你希望生成的骨架屏可以和页面相匹配，可以往下看！！！ 1、实现原理： 给需要的dom标签设置特定类名，使用getBoundingClientRect来获取dom标签的大小和位置信息，并以此来生成一个占位符，最终生成一份“骨架屏”，当页面加载完毕，移除该“骨架屏”组件即可。因为这是在mounted周期获取元素信息，故如果元素信息不满意，需要先默认一些初始数据 2、代码..
vue骨架屏
前端咸鱼翻身的博客
03-19 1081
Vue页面实现骨架屏，使用draw-page-structure插件，优化用户体验。
vue中骨架屏实现
05-29
在Vue中，可以使用第三方库vue-skeleton-webpack-plugin来实现骨架屏。以下是一个简单的示例： 1. 安装vue-skeleton-webpack-plugin库： ```bash npm install vue-skeleton-webpack-plugin --save-dev ``` 2. 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值