vue图片预加载
目的： 图片预加载能够使得用户在浏览后续页面的时候，不会出现图片加载一半导致浏览不流畅的情况。
一、方法一
项目打开的时候要对图片进行预加载，在App.vue里面的beforeCreate添加预加载程序
App.vue
beforeCreate(){
let count = 0;
let imgs = [
//用require的方式添加图片地址，直接添加图片地址的话，在build打包之后会查找不到图片，因为打包之后的图片名称会有一个加密的字符串
require('xxx')
]
for (let img of imgs) {
let image = new Image();
image.src = img;
image.onload = () => {
count++;
};
}
}
二、方法二
创建两个文件名称分别为imgPreloader.js以及imgPreloaderList.js，前者用于导出图片加载的异步方法imgPreloader，后者用于存放图片列表
然后在main.js里面，Vue对象创建之前，必须先把图片全部加载完才能创建Vue对象并且挂载到#app上
1.imgPreloaderList.js
export default [
require('相对图片地址1'),
require('相对图片地址2'),
...
];
2.imgPreloader.js
const imgPreloader = url => {
return new Promise((resolve, reject) => {
let image = new Image();
image.src = url;
image.onload = () => {
resolve();
};
image.onerror = () => {
reject();
};
});
};
export const imgsPreloader = imgs => {
let promiseArr = [];
imgs.forEach(element => {
promiseArr.push(imgPreloader(element));
});
return Promise.all(promiseArr);
};
3.main.js
// 导入图片预加载方法以及图片列表
import { imgsPreloader } from './config/imgPreloader.js';
import imgPreloaderList from './config/imgPreloaderList.js'; (async () => {
await imgsPreloader(imgPreloaderList);
//关闭加载弹框
document.querySelector('.loading').style.display = 'none';
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');
})();
4.加载弹框
main.js提到加载弹框，那么这个弹框要加在哪里呢？答案是index.html
<style>
/*
*加载弹框的样式
*/
</style>
<body>
<div class="loading">
</div>
</body>
三、总结
方法二的效果较方法一更符合一般的需求，方法一可能图片还没完全加载完成，就执行beforeMount了。
vue图片预加载的更多相关文章
- js原生图片懒加载 或 js原生图片预加载，html标签自定义属性
使用原声js来实现图片预加载,或图片懒加载,小伙伴们可以根据项目需要来结合vue或者是react来进行修改. 一.什么是图片懒加载或什么是图片预加载 当访问一个页面的时候,先把img元素或是其他元素的 ...
- Javascript图片预加载详解
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 利用简洁的图片预加载组件提升h5移动页面的用户体验
在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http ...
- Javascript实现图片预加载【回调函数，多张图片】
使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多张图片预加载代码.当接二连三的案例中都涉及图片预加载时,就 ...
- JS实现图片预加载无需等待
网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 图片预加载和AJAX的图片预加载
利用js实现图片预加载,加载所需要图片的路径与名称即可,很容易实现,该方法尤其适用预加载大量的图片: <div class="hidden"> <script t ...
- 发布我的图片预加载控件YPreLoadImg v1.0
介绍 大家好!很高兴向大家介绍我的图片预加载控件YPreLoadImg.它可以帮助您预加载图片,并且能显示加载的进度,在预加载完成后调用指定的方法. YPreLoadImg控件由一个名为PreLoad ...
- jquery实现图片预加载
使用jquery实现图片预加载提高页面加载速度和用户体,本就为大家详细分析jquery图片预加载的实现原理. 什么时候使用图片预加载? 如果页面使用了很多不是最初加载便可见的图片,有必要进行预加载: ...
随机推荐
- 牛客ACM赛 B [小a的旅行计划 ]
链接 B 小a的旅行计划 把\(n\)个数中选任意数分成\(a,b\)两个集合,集合无区别,要求不包含且有交,求方案数.\(n\leq 10^{13}\) 首先讨论\(a,b\)并集是否为全集: 若是 ...
- AutoLayout面试题记录-自动布局
1. 面试上海某家软件公司,题目是这样,有一个View,距左右父View长度一定,高度一定.这个View上面有4个小View,高度相同(或者说一定), 要求不管屏幕怎么变,这4个小View总是等宽平分 ...
- Access分页语句
一.双TOP法高效率的Access分页的SQL语句,语法格式: SELECT * FROM (SELECT TOP "&pagesize&" * FROM (SEL ...
- U盘安装win8(win7)+centos7双系统
centos7除了之后,就像尝鲜看看,但是发现安装之后会失去win8启动项.导致重装系统,经过反复折腾,终于搞定了,发出来共享下.默认你的 window系统已经安装好,不介绍window安装过程.本文 ...
- 【CF1243A】Maximum Square【贪心】
题意:给你n个长度为ai的木板,求最大能拼成的矩形为多大 题解:显然贪心每次选最大的进去拼,那么剧需要枚举矩形长度x,看最长的k个能够拼出长度为x的矩形即可 #include<iostream& ...
- C# 修改注册表立即刷新 转载
修改注册表后不重启计算机并生效,代码如下:const int WM_SETTINGCHANGE = 0x001A; const int HWND_BROADCAST = 0xffff;IntPtr r ...
- Http发送Json
public static JSONObject post(String url,JSONObject json){ HttpClient client = new DefaultHttpClient ...
- 如何安全修改cocoapods上的第三方代码
其实搞java的都知道maven管理,解决第三方代码修改的办法就是架一个服务器,把这些修改的库放在这里,然后再maven里配置哪些需要用本地仓库的.其实cocoapods也可以做本地包管理: 大致方法 ...
- 去掉xcode中警告的一些经验
1.编译时,编译警告忽略掉某些文件 只需在在文件的Compiler Flags 中加入 -w 参数,例如: 2.编译时,编译警告忽略掉某段代码 #pragma clang diagnostic pus ...
- 设置VsCode自动换行
方法如下: 文件 -> 首选项 -> 设置 如果你是Mac则是右上角 Code -> 首选项 -> 设置 然后在右侧的编辑窗口中添加 1 "editor.wordWr ...