vue项目未加载完成前显示loading

原创 已于 2022-04-13 09:10:53 修改 · 1.3k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

于 2021-12-20 11:31:51 首次发布
本文探讨了成为强者的心路历程，并分享了一个实用的Vue项目加载优化技巧，通过在页面完全加载前展示loading界面来提升用户体验。

真正的强者，他们在年轻的时候，经历了沧桑，化解了迷茫，学会了坚强，懂得了疗伤。他们在哪里都能活，哪里都是舒适区，哪里都是自己的天堂
在这里插入图片描述

vue项目未加载完成前显示loading

vue作为单页面，首次加载是比较慢的，加载完成前显示的load界面较有必要！！

解决方法:

public/index.html

<div id="app">
      <div class="avue-home">
        <div class="avue-home__main">
            <img class="avue-home__loading" src="./svg/loading-spin.svg" alt="loading">
            <div class="avue-home__title">
                正在加载资源
            </div>
            <div class="avue-home__sub-title">
                初次加载资源可能需要较多时间 请耐心等待
            </div>
        </div>
        <div class="avue-home__footer">
            <a>Copyright 2017 © SOS Inc. All Rights Reserved. 浙江索思科技有限公司版权所有 Powered by 浙江索思科技有限公司</a>
        </div>
      </div>
    </div>

在id = app的节点中编写你要展示的load状态，加载好项目，自动会填充app里的内容！！！

Aurora_juan
关注
vue实现图片加载完成前的loading组件方法
08-28
Vue 实现图片加载完成前的 Loading 组件方法 在前端开发中，图片加载是非常常见的操作，但是如何在图片加载完成前展示 Loading 效果呢？今天，我们将分享一篇使用 Vue 实现图片加载完成前的 Loading 组件方法，这个...
精选资源
vue loading 页面加载动画提示
03-29
在实际应用中，当用户触发数据请求或者页面切换时，我们需要在Vue实例中调用`show`方法显示加载动画，请求完成后再调用`hide`方法隐藏。这通常可以在Vue的生命周期钩子函数中实现，例如在`beforeRouteEnter`或`...
vue 首页背景图片加载完成前增加 loading 效果 -- 使用 new Image() 实现
weixin_33712987的博客
02-01 2316
1. 创建 loading 公用组件 <template> <div class="load-container"> <div class="load"></div> <div class="text">加载中...</div> </div> </template> <s...
VUE——axios的interceptor拦截器实现加载数据前显示几秒loading页面后消失（图文详情）
Poppy_LYT的博客
08-02 2611
VUE——interceptor拦截器 demo示例：在请求成功之前拦截，显示loading蒙层，在请求成功之后loading蒙层消失，并console.log出请求的内容 需要用到 1、 // 添加请求拦截器 axios.interceptors.request.use 2、// 添加响应拦截器 axios.interceptors.response.use 第一步：创建一个loading.vu...
vue项目未加载完成前显示loading样式
jiangjunyuan168的博客
05-11 2591
1、在index.html中添加元素和绑定样式 <body> <div id="appLoading"> <div class='loading'></div> </div> <div id="app" style="display: none"></div> </body> <style media="screen" type="text/css">
当vue 页面加载数据时显示 加载loading
创业项目
07-20 3172
Vue 页面加载数据之前增加 `loading` 动画 创建组件 1、新建.vue文件：src -> components -> laoding -> index.vue 2、编辑index.vue文件 <template> <div class="loading"></div> </template> <script> export default { name: "lo...
vue数据未加载完成前显示loading遮罩
lijiext
01-21 5673
目的 在前后端分离项目中，由于页面请求和数据请求并非同步，所以导致页面和数据不能同时渲染，因此在实际过程中往往采用SSR即服务端渲染或者请求数据时采用遮罩(加载中)的方式提升用户体验。 下面我将使用loading遮罩的方式实现更加友好的数据加载 参考 https://codepen.io/bartezic/pen/ByqeNq 效果 代码 在App.vue中添加一个<div> <div> <div id="appLoading"> <div
vue项目未加载完成前显示loading...
优快云_Hss的博客
02-17 4440
场景：vue项目加载时，由于各种原因 可能会白屏一会再显示页面 解决方法：在index.html里面加入loading的元素，让loading元素显示，让app元素隐藏 // index.html <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m
Vue中的无限加载vue-infinite-loading的方法
08-27
Vue中的无限加载vue-infinite-loading的方法 Vue中的无限加载是一种常见的技术，使用vue-infinite-loading库可以轻松实现无限加载的功能。本文将详细介绍Vue中的无限加载vue-infinite-loading的方法，包括安装、...
vue-cli监听组件加载完成的方法
10-18
在Vue.js开发中，有时我们需要监听组件的加载完成状态，以便在所有组件加载完毕后执行特定的操作。在使用Vue CLI构建项目时，这个问题可以通过结合Vuex的状态管理库来解决。本文将详细介绍如何在Vue CLI项目中监听...
页面还未加载完成显示loading
zhangjing1019的博客
11-08 1万+
页面未加载完成，显示loading的图标 html代码 css  代码 #loading{ width: 100%; height: 100%; background-color: #fff; position: fixed; top:0; left: 0; z-index: 9999; } #loading >i{ width:
vue实现图片加载完成前的loading组件
热门推荐
_破败的博客
03-14 2万+
本人新开个人博客，后期所有文章只在博客中更新！         export default {         props: ['src'], // 父组件传过来所需的url         data() {             return {                 url: 'http://www.86y.org/images/loading.gif'
c3等待加载样式 vue_vue加载中loading提示信息(iView Spin)
weixin_35793308的博客
12-24 971
场景在一些按钮的点击操作中，假如没有限制，用户多次点击，会向后台发送多次请求。还有一种情况是：当页面加载时，假如数据没有加载完成，此时为了防止用户进行操作，会显示一个遮罩：加载中...。这个操作和上面差不多，只是触发方式不同，一个是在生命周期中触发，一个是通过用户点击触发实现方式一 iview-遮罩loadinghtml:Loading...发送请求css:/* 旋转效果 */.demo-spin...
【Vue】图片加载中显示Loading
Maria028的博客
07-07 4816
问题 加载图片列表式，渲染缓慢，影响体验 解决 图片加载完成前显示loading，图片加载错误显示错误图片 <template> <view> < :src="url"></img> </view> </template> <script> export default { name: 'myImage', props: { src: { type: String, }, },
vue页面加载时样式未加载完就在页面显示
qq_43378240的博客
01-16 753
然后在html上目标元素加上v-cloak（在最外层盒子加上就会全局起效）就会出现页面上全是 {{数据}} 的这种情况，ui控件还没加载出来。
vue项目中使用Js判断图片是否加载完 所有图片加载完成前展示Loading效果
蒲公英芽的博客
11-14 6164
vue项目中使用Js判断图片是否加载完 所有图片加载完成前展示Loading效果。用户创建自己的页面，给创建好的内容页面增加皮肤效果。选择某一皮肤后，当该皮肤中的所有图片都加载完后，再展示皮肤效果；加载图片的时候展示loading效果。
vue获取页面数据结束前添加loading，结束后再显示页面
curlyhairfeifei的博客
04-13 4153
vue获取页面数据结束前添加loading，结束后再显示页面 今天做项目的时候，后端提供了一个接口返回的数据量很大，获取完整的数据需要一定的时间，而没有完整的数据是没有办法显示正常的界面的，所以就需要添加一个loading的效果。 我直接是选择使用element-ui提供的loading组件来实现，实现过程如下（较为简单，只是记录一下，方便以后使用）： 首先，vue创建页面的函数为created()方法，这个方法内部调用我们需要的数据的接口。 我需要实现的效果就是这个接口获取好数据之前要有个loading
vue3 指令loading,加载中，遮罩层,局部loading
的博客
09-02 734
【代码】vue3 指令loading,加载中，遮罩层,局部loading。
vue3项目页面数据加载完成前展示loading效果
最新发布
11-19
在Vue3项目中，有多种方法可以实现页面数据加载完成前展示loading效果： - **自定义插件实现全局加载loading动画蒙层效果**：可以实现一个简单的loading加载动画蒙层效果插件，该插件支持在项目中任何需要使用的地方直接引入使用。动画效果可参考借鉴Web安全色 | CSS可视化，里面有很多纯css实现的动画效果[^2]。 - **通过自定义变量控制loading显示隐藏**：自定义一个变量`isLoading`初始化为`true`，在数据请求成功之后将变量改为`false`，在`template`中通过变量来控制是否显示隐藏，还可使用Vue自带的过渡效果增加用户体验。需要在全局的css中加入过渡需要的样式： ```css .fade-enter, .fade-leave-active { opacity: 0; } .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } ``` `.vue`文件使用代码示例片段： ```vue <template> <div> <transition name="fade"> <loading v-if="isLoading"></loading> </transition> </div> </template> <script setup> import { ref, onMounted } from 'vue'; import Loading from '@/components/loading'; const isLoading = ref(true); const loadPageData = async () => { // 模拟axios请求页面数据 await new Promise(resolve => setTimeout(resolve, 2000)); isLoading.value = false; }; onMounted(() => { loadPageData(); }); </script> ``` - **使用特定方法添加loading效果**：具体实现时，先获取当前上下文，然后调用`$loading`方法创建loading实例，中间进行一系列操作，上传成功后关闭loading并显示上传成功信息。示例代码如下： ```javascript let thisContent = this; let loading = thisContent.$loading({ lock: true, text: '上传中，请稍候...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.5)' }); // 中间进行一系列的操作 // 上传成功后关闭loading，并显示上传成功 loading.close(); thisContent.$message('上传文件成功'); ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值