前端VUE图片预加载

前景：先来说一下图片预加载跟图片懒加载有什么区别：

1.图片懒加载：相对于项目中的图片因为网络原因加载太慢，那么用户第一眼看到呢可能就是页面图片空白然后图片从上到下慢慢悠悠的加载出来，这个时候自定义化包括图片组件化会在加载的过程中先给出一个默认图进行显示，当我们项目中要显示的图片加载完成之后在替换掉默认显示的懒加载图片，这是一种情况，第二种情况呢就是图片加载异常显示一个默认图，处理逻辑一样，区分一下图片加载中还是图片加载完成异常的情况插入默认图就好了。

2.图片预加载：相对于这种情况呢，就是可能在很多活动H5或者APP中会遇到，项目中存在多张背景图以及很多大图，甚至还有根据状态动态替换背景图大图等等效果，总之可以说整个项目完全就是图片叠加呈现出来的效果吧。那么在这种·情况在进入页面之前就需要吧图片提前预加载完成这样的话无论跳转进入哪一个页面，图片都不会出现空白或者加载慢的情况，但是有个弊端就是所有图片都在首页加载，所以首屏速度会受影响，，可以有个过渡页或者其他页面先吸引用户其次往后走，这块需求就看产品怎么定义了。

所以本地图片预加载，动态接口返回的数据懒加载，这样可以提高用户体验

<template>
<!-- 过渡页最外层 --><div class="Home"><div class="loadingBox"><!-- 加载进度条 --><div class="loading"><div>{{ percent }}</div><!-- 底部背景图 --><img src="../assets/home/dot.gif" alt="" /></div><!-- logo --><div class="logo"><img src="../assets/home/logo.png" alt="" /></div></div></div>
</template>
<script>
export default {name: "index",data() {return {// 预加载已完成的图片数量count: 0,// 进度条百分比%percent: "",// 图片总数据allList: [],};},/*** watch监听图片预加载完成的数量* 首先可能会疑惑这里的108数字是什么意思，* 这个是我项目中需要预加载的图片总数量，* 可能会有小伙伴产生疑问为什么写死不写活儿，{这里为嘛不取allList总数据的长度呢}，* 因为监听的时候可能图片没有加载完就会执行进入，所以先写死，有较好的方法可以@博主*/watch: {// 监听Data中的countcount: function (val) {if (val === 108) {// 图片加载完成后跳转页面this.$router.push("/home");}},},methods: {/*** imgLoad 图片全局预加载** require.context 查找指定目录文件中的文件/图片* @param{1：文件地址}* @param{2：是否查找子目录}* @param{3：正则过滤}*/imgLoad() {/*** 循环查找指定目录文件的图片* @param{注意}这里由于同时是分模块开发的目录结构，* 统一的话需要更改所有模块下的图片路径地址* 所以检索图片文件就多次一举了，正常预加载* 的图片统一放在一个文件夹下的目录就可以*/let chooseEat = require.context("../assets/chooseEat",false,/\.gif|png$/);let end = require.context("../assets/end", false, /\.gif|png$/);let home = require.context("../assets/home", false, /\.gif|png$/);let lamp = require.context("../assets/lamp", false, /\.gif|png$/);// chooseEat文件夹图片let chooseEatList = [];// end文件夹图片let endList = [];// home文件夹图片let homeList = [];// lamp文件夹图片let lampList = [];// 总数据let allList = [];for (var i = 0; i < chooseEat.keys().length; i++) {chooseEatList.push({id: 1,img: chooseEat.keys()[i].substr(2, chooseEat.keys()[i].length),});}for (var j = 0; j < end.keys().length; j++) {endList.push({id: 2,img: end.keys()[j].substr(2, end.keys()[j].length),});}for (var k = 0; k < home.keys().length; k++) {homeList.push({id: 3,img: home.keys()[k].substr(2, home.keys()[k].length),});}for (var p = 0; p < lamp.keys().length; p++) {lampList.push({id: 4,img: lamp.keys()[p].substr(2, lamp.keys()[p].length),});}allList =chooseEatList.concat(endList,homeList,lampList);// 合并数据// 根据层级追加目录路径前缀 1chooseEat 2end 3home 4lampthis.allList = allList;for (var b in allList) {var image = new Image();if (allList[b].id === 1) {image.src= require("../assets/chooseEat/" + allList[b].img);} else if (allList[b].id === 2) {image.src = require("../assets/end/" + allList[b].img);} else if (allList[b].id === 3) {image.src = require("../assets/home/" + allList[b].img);} else if (allList[b].id === 4) {image.src = require("../assets/lamp/" + allList[b].img);}// 图片加载image.onload = () => {this.count++;// 计算图片加载的百分数，绑定到percent变量let percentNum = Math.floor((this.count / 108) * 100);this.percent = `${percentNum}%`;};}},},mounted() {// 调用图片预加载方法this.imgLoad();},
};
</script>
<style scoped>
.Home {width: 100%;min-height: 100vh;position: relative;background: url(../assets/home/homeBgc.png) no-repeat;background-size: 100%;
}
.loading {position: relative;top: 260px;font-size: 12px;color: #fff;text-align: center;
}
.loading img {width: 50px;margin-top: 10px;
}
.logo {position: absolute;width: 100%;text-align: center;bottom: 95px;
}
.logo img {width: 147px;height: 51px;visibility: visible !important;
}
</style>

预加载中效果:

预加载完成跳转到指定页面效果：

前端VUE图片预加载相关推荐

快乐前端-图片预加载
前言正所谓金三银四五吃土,因此这些天几个前端技术群讨论最多的话题就是面试题了.某日群内讨论一道面试题:"前端如何实现大量图片预加载以及预加载进度动画进度条显示?" 恰巧本人以前j ...
vue实现图片预加载实操
业务场景是这样的:在页面里有一个提醒文案,提醒文案里有个按钮,点击按钮会弹出示例弹窗,弹窗里上面有标题,中间一个比较大的图片,27kb:下面有个按钮.在苹果手机使用微信打开时,上面的标题和下面的按钮都 ...
html加载图片有超时时间吗,[前端]图片预加载方法
目录 1. 使用jQuery图片预加载(延迟加载)插件Lazy Load Lazy Load也叫惰性加载,延迟加载,顾名思义,就是在图片未到达可视区域时,不加载图片,我们常常在很多的优秀网站上看到类似 ...
vue——图片懒加载和禁止图片使用缓存方法
图片预加载: 图片预加载就是在网页全部加载之前提前加载图片.当用户需要查看时可直接从本地缓存中渲染,以提供给用户更好的体验,减少等待的时间.否则,如果一个页面的内容过于庞大,没有使用预加载技术的页面就 ...
页面加载成功后调用_在微信小程序里实现图片预加载组件
网页中的图片预加载我们知道在 Web 页面中实现图片的预加载其实很简单,通常的做法是在 JS 中使用 Image 对象即可,代码大致如下 var image = new Image() image. ...
mfc cimage加载显示图片_在微信小程序里实现图片预加载组件
网页中的图片预加载我们知道在 Web 页面中实现图片的预加载其实很简单,通常的做法是在 JS 中使用 Image 对象即可,代码大致如下 var image = new Image() image. ...
jQuery插件之图片预加载
背景: 图片是web页面的重要组成部分,也是前端页面优化的重要内容.当用户访问一个比较庞大的页面时,若相关资源没有提前加载,可能会展示给用户一片空白,从而导致用户流失等:再比如受网速的影响,资源加载时 ...
vue中watch进行ajax,在vue中预加载watch用法
下面我就为大家分享一篇vue进行图片的预加载watch用法实例讲解,具有很好的参考价值,希望对大家有所帮助. watch应用场景我想信图片预加载大家肯定都有接触过,当图片量大的时候,为了保证页面图片 ...
3种Javascript图片预加载的方法详解
3种Javascript图片预加载的方法详解预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度. 这对图片画廊及图片占据很大比例 ...

前端VUE图片预加载

前景：先来说一下图片预加载跟图片懒加载有什么区别：

预加载中效果:

预加载完成跳转到指定页面效果：

前端VUE图片预加载相关推荐

最新文章

热门文章