关于vue首屏加载loading问题

这篇具有很好参考价值的文章主要介绍了关于vue首屏加载loading问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

注意:网上搜索出来的都是教你在index.html里面<div id="app"><div class="loading"></div>或者在app.vue Mounte生命周期函数控制app和loading的显示和隐藏,这里会有一个问题,就是js渲染页面需要时间,一样会出现几秒钟白屏。mounted(包裹使用nextTick)执行回调div app的内容依然没有开始渲染。

正确的做法是给loading一个z-index:-1,绝对定位。当app有内容时覆盖loading,确保app的内容高度至少占一屏,不然会出现覆盖不全。文章来源地址https://www.toymoban.com/news/detail-696319.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo测试</title>
    <style>
body{
  width: 100vw;
  min-height: 100vh;
  position: relative;
  background-color: #ffffff;
  margin: 0;
}
#app{
  background-color: #ffffff;
}
        .loading-model {
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0;
            z-index: -1;
        }

        .loading {
            width: 100px;
            height: 100px;
            border: 10px solid #176af8;
            border-bottom: #cccccc 10px solid;
            border-radius: 50%;
            -webkit-animation: load 1.1s infinite linear;
        }

        @-webkit-keyframes load {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
<div id="app">
</div>
<div id="appLoading" class="loading-model">
    <div class="loading"></div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

到了这里,关于关于vue首屏加载loading问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端Vue自定义加载中loading加载结束end组件 可用于分页展示 页面加载请求

    前端Vue自定义加载中loading加载结束end组件 可用于分页展示 页面加载请求, 请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13219 效果图如下: 实现代码如下: 使用方法 HTML代码实现部分 组件实现代码

    2024年02月11日
    浏览(55)
  • Vue首屏加载过慢出现白屏的六种优化方案

    公司业务展示官网开发,构建版本后在测试环境下,发下首屏加载损耗高达几十秒(服务器在国外,所以也导致加载时间变长),于是采用了以下方法来达到提速目的。  路由懒加载和组件懒加载:const One = ()=import(\\\"./one\\\"); 图片懒加载:使用vue-lazyload插件 gizp压缩是一种http请

    2023年04月10日
    浏览(34)
  • uniapp 发布h5前端项目时因chunk-vendors过大导致首屏加载太慢以及跳转外部链接

    安装插件 compression-webpack-plugin 安装webpack 新建web.config.js

    2024年02月11日
    浏览(34)
  • 关于vue3+niginx前端部署问题

    曾经有人给我讲,所谓个人技术是死磕出来的,只有经过不断的试错和解决过程所有问题,以及不断变换思路去解决一件问题的过程,就是个人技术的成长。 最近在给自己搭建的小服务加一个bolg模块,在网上大概看了下轻量级的框架,最后使用vueQuill富文本编辑器 ,期间产

    2024年02月12日
    浏览(41)
  • nginx部署前端项目 nginx部署无法加载js/css问题 Uncaught SyntaxError: Unexpected token ‘<‘

    注意:将多个html项目放在一个server中出现js,css加载不出来问题 可以将文件放在主项目同级目录下(暂时解决,可能是静态资源配置问题,不会弄)。 1.下载nginx,解压 2.将项目放入html目录下 3.修改nginx.conf文件 4.修改端口防止占用和添加新映射 5.普通html项目,部署会出现以下

    2024年02月04日
    浏览(48)
  • vue element-ui Loading加载事件的使用以及自定义Loading加载动画

     elemen-ui官方使用 loading加载事件属性解释 element-loading-text 在绑定了 v-loading 指令的元素上添加 element-loading-text 属性,其值会被渲染为加载文案,并显示在加载图标的下方 element-loading-spinner 和 element-loading-background 属性分别用来设定图标类名和背景色值。 作为小白,这次主要

    2024年02月11日
    浏览(43)
  • Vue项目中app.js过大,导致web初始化加载过慢问题

    1、删除多余不需要的库: npm uninstall xxx 如例如moment库文件是很大的可以直接放到index.html文件直接CDN引入 2、修改/config/index.js配置文件:将productionGzip设置为false ​ 3、设置vue-router懒加载 懒加载配置: ​ 非懒加载配置: ​ 4、在webpack.prod.conf.js文件中修改配置: ​ 5、在in

    2024年02月11日
    浏览(42)
  • SPA首屏加载速度慢怎么解决

    SPA(单页面应用)的首屏加载速度慢可能是由于以下几个方面造成的: 大量JavaScript和CSS文件:SPA通常会使用一些框架或库,这些框架和库往往伴随着大量的JavaScript和CSS文件,导致首屏加载时间变慢。 图片过多:如果SPA中使用了大量图片,会导致首屏加载时间变慢。特别是当

    2024年01月18日
    浏览(31)
  • 关于前端数据Fail to load response data解决方法

    \\\"Failed to load response data:\\\" 这个错误通常是由于请求的资源没有被正确加载或者没有找到。这可能是由于以下几种原因导致的: 资源路径错误 : 确保你请求的资源路径是正确的。检查一下你的代码,确保你指定的路径是准确的,并且资源确实存在于该路径。 资源不存在或者路径

    2024年02月04日
    浏览(56)
  • web前端Javascript—7道关于前端的面试题

    本文主要是web前端Javascript—的面试题,附上相关问题以及解决答案,希望对大家web前端Javascript闭包的学习有所帮助。 每个JavaScript 程序员都必须知道闭包是什么。在 JavaScript 面试中,你很可能会被问到的问题 以下是 7 个有关 JavaScript的面试题,比较有挑战性。不要查看答案

    2024年02月03日
    浏览(95)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包