解决前端加载闪烁简单方案

最新推荐文章于 2025-06-20 07:23:59 发布

原创最新推荐文章于 2025-06-20 07:23:59 发布 · 600 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #axios #前端

前端专栏收录该内容

1 篇文章

订阅专栏

文章介绍了如何通过CSS和自定义标签[v-clock]来避免前端页面加载时的内容闪烁问题。在页面头部添加CSS规则使[v-clock]元素默认不显示，待内容填充完毕后再显示，从而提升用户体验。

解决前端加载闪烁简单方案

加载页面时会先加载模版并显示，然后给模版内容填数据。
为了让用户看不到模版内容，让其不显示。
手动解决：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	//解决模版闪烁问题，即不显示模版内容
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
//自定义v-clock标签
<div id="vue" v-clock>