vue骨架屏

最新推荐文章于 2024-07-25 14:07:12 发布

置顶陈一手

最新推荐文章于 2024-07-25 14:07:12 发布

阅读量327

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/YuT_ian/article/details/109445010

版权

在开发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">
    <title>Document</title>
</head>
<body>
    <div id="root">        
    </div>
    <script type="text/javascript" src="bundle.js"></script></body>
</body>
</html

当js执行完之后，会用vue渲染成的dom将div#root完全替换掉。
我们在div#root中加入模拟骨架屏，在Chrome开发者工具调整网速：

<div id="root">
    这里是骨架屏
</div>

在这里插入图片描述
由此可知，将骨架屏内容直接插入div#root中即可实现骨架屏。

陈一手

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue骨架屏

在开发webapp的时候总是会受到首屏加载时间过长的影响，主流的解决方法是在载入完成之前显示loading图效果，而一些大公司会配置一套服务端渲染的架构来解决这个问题。考虑到ssr所要解决的一系列问题，越来越多的APP采用了“骨架屏”的方式去提升用户体验。一、分析Vue页面的内容加载过程 vue项目中的入口index.html只有简单的内容：<!DOCTYPE html><html lang="zh-CN"><head> <meta h
复制链接

扫一扫