vue中实现图片预加载及可视化百分比loading

最新推荐文章于 2024-05-24 12:57:57 发布
最新推荐文章于 2024-05-24 12:57:57 发布
阅读量5.3k 收藏 14
点赞数 9
分类专栏： vue 文章标签： vue loading 图片预加载 可视化百分比 进度条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40576549/article/details/97803370
版权

首先根据项目需求在index.html里面布局loading页面，在app.vue实现图片预加载，图片资源加载完毕后移除loading的div

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>vue中实现图片预加载及可视化百分比loading</title>
    <style>
      .loading{
              width: 100%;
              height: 100%;
              background: #fef0d1;
              position: fixed;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              z-index: 9999999;
          }
          .lotxt{width: 50%;}
          .outbg{
            width: 5rem;
            height: 1rem;
            margin-top: 20px;
最低0.47元/天 解锁文章
周小六
关注
  • 9
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vue实现图片加载完成前的loading组件方法
08-28
Vue 实现图片加载完成前的 Loading 组件方法 在前端开发中，图片加载是非常常见的操作，但是如何在图片加载完成前展示 Loading 效果呢？今天，我们将分享一篇使用 Vue 实现图片加载完成前的 Loading 组件方法，这个...
实现loading加载效果带百分比进度
木子木木的专栏
03-29 1418
html: <div class="d-loading" id="loading"> <div class="d-loadVpic"> <div class="d-opctv"></div> <div class="d-innervpic"></div> <div class="d-loadmesg">
【vue+el-upload】在导入过程中，展示动态百分比进度
栀妹儿的炼丹炉
04-27 2244
vue项目使用element-ui 导入文件时表格区域显示加载百分比 （假的） 我的需求是：在导入过程中，展示动态百分比进度 声明属性： loading: true, // 表格遮罩层 isShowLoading:false, // 百分比div展示判断 timer: null // 定时器 1、百分比进度的div： <divstyle=" left:45%; position:absolute; top: 44%; font-size:50px; width: 100%;
Vue3项目中加载动画的实现
最新发布
fafafafa_fa的博客
05-24 620
正常路由的引入方式通常会导致网页首屏加载时间过长，给用户带来不好的体验，所以我们通常使用路由懒加载的方式来引入路由，这样只会在使用到某个路由时才会去加载它，减少了初次加载的时间。
Vue实现网页首屏加载动画、页面内请求数据加载loading
热门推荐
在写作的路上持续输出。
11-17 1万+
Vue实现网页首屏加载动画、页面内请求数据加载loading
进度条显示百分比html,显示百分比的网页Loading进度条
weixin_36051940的博客
06-07 829
function setSB(v, el) {var ie5 = (document.all && document.getElementsByTagName);if (ie5 || document.readyState == "complete") {filterEl = el.children[0];valueEl = el.children[1];filterE...
Vue预加载和懒加载的使用方法
紫月i的博客
10-23 4751
预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。 懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。 两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。 懒加载对服务器前端有一定的缓解压力作用，预加载 则会增加服务器前端压力。 预加载： 简单理解：就是在使用该图片资源前，先加载到本地来，真正到使用时，直接从本地请求数据就行了。 var arr = [ '../picture/1.jpg', '../picture/2.jp
谈谈vue的预加载
weixin_44727080的博客
02-24 6048
前言： 使用vue久了，会发现很多以前没有注意过的问题，比如说，为什么压缩打包以后的js文件，打开F12以后，再点击js文件，无法查看具体内容，但是刷新具体页面的时候，有的文件又能点击看内容，这是怎么回事呢？这里来说说。 前提条件： 项目中 使用 compression-webpack-plugin 打包，可以看到js都是这种格式了 现象： 1、打开F12可以看到，初始化vue的打包后的页面可以看到，加载的js文件，是真实存在的 2、点击 preview 可以看到 ...
在 Vue 中预加载组件
ufrontend的博客
04-29 1058
在 Vue 中，利用 VueRouter 可以轻松的实现两个组件（页面）之间的切换，有个常用的设计就是需要在登录页登录后跳转至一个内容页，通常的做法是在登录校验完成之后立即切换路由至内容页，接着内容页发送网络请求获取渲染需要的数据然后渲染带有业务数据的 DOM：上图中，由于内容页的核心数据都是需要通过网络请求来获取，在数据获取回来之前页面处于空白（或 loading）状态，这里并没有什么逻辑问题，只是有时候可能会想，怎么将这个等待过程提前一点比如放置路由跳转之前，让内容页的初始数据准备好了再进行路由跳转。
vue+vuex实现可视化图形编辑器
05-13
“vue+vuex实现可视化图形编辑器”这个项目的核心在于，它允许用户通过图形界面交互来创建、编辑和操作图形。这通常涉及到以下几个关键知识点： 1. **Vue.js基础**：Vue.js提供了一套声明式的数据绑定和组件系统，...
vue进行图片的预加载watch用法实例讲解
08-28
Vue中的图片预加载Watch用法实例讲解 title: Vue进行图片的预加载Watch用法实例讲解 Vue框架中，图片预加载是一个常见的需求，特别是在图片数量较多的情况下。为了确保页面上的所有图片都加载完成后，再显示页面...
vuelazybackgroundimages一个简单的Vue组件用于延迟加载背景组件
08-10
vue-lazy-background-images一个简单的Vue组件，用于延迟加载背景组件
vue大屏可视化demo
01-25
vue大屏可视化demo 使用方法： # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production ...
Vue Echarts实现可视化世界地图代码实例
10-17
主要介绍了Vue Echarts实现可视化世界地图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue实现百分比进度条
月色真美121的博客
09-04 2985
vue实现百分比进度条&增加和减少
Vue---vue中使用nprogress插件-进度条的方法
COCOLI_BK的博客
12-24 2161
放在导航守卫中使用： 1、安装 $ npm install --save nprogress 或者 $ yarn add nprogress //用法 NProgress.start(); NProgress.done(); 2、使用 router.js //导入 import NProgress from 'nprogress' import 'nprogress/nprogr...
VUEJS实现网页进度条加载效果
g1024173314的博客
10-24 785
vuejs使用NProgress实现网页进度条效果
Vue - 进度条插件（NProgress）
技术共享，共同进步！
05-20 1505
进度条插件（NProgress）
小程序图片加载
qq_43310358的博客
05-10 757
小程序图片加载(实现加载中、加载失败、空图等效果 图中实现的效果是基于微信小程序提供的image组件实现的，用到的属性如下： src（图片资源地址） binderror（允许横向滚动） bindload （设置横向滚动条位置） 实现的效果 这个效果已被我封装成组件了，需要的朋友（新建文件夹名字自取，我的是img-load）,在创建对应的文件直接粘贴代码就行 wxml代码 <!-- 有图片地址时 --> <view wx:if="{{url}}" class="before-pack"
vue怎么实现视频预加载
06-03
在Vue中实现视频预加载可以使用HTML5的video标签。可以在mounted钩子函数中创建一个video元素，并设置preload属性为“auto”，以便在页面加载时自动预加载视频。 例如： ``` <template> <div> <video ref="myVideo" preload="auto"> <source src="your-video-source" type="video/mp4"> </video> </div> </template> <script> export default { mounted() { this.$refs.myVideo.load(); } } </script> ``` 在上面的代码中，我们使用`<video>`标签创建一个视频元素，并设置preload属性为“auto”，以便在页面加载时自动预加载视频。我们还使用`<source>`标签指定视频文件的URL和类型。 在mounted钩子函数中，我们使用`this.$refs.myVideo.load()`方法手动触发视频的加载，以便在用户播放视频时能够立即播放。 这样就可以在Vue中实现视频预加载了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值