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图片预加载的实现原理. 什么时候使用图片预加载? 如果页面使用了很多不是最初加载便可见的图片,有必要进行预加载: ...
随机推荐
- 使用GDB调试产生多进程的程序
如果一个进程fork了多个进程,这时使用GBD工具对程序进行调试会如何呢? 实际上,GDB 没有对多进程程序调试提供直接支持.例如,使用GDB调试某个进程,如果该进程fork了子进程,GDB会继续调试 ...
- 2018-10-25-weekly
Algorithm 94. 二叉树的中序遍历 What 给定一个二叉树,返回它的中序遍历. How 二叉树的中序遍历顺序为左-根-右,可以用递归来解,对左子结点调用递归函数,根节点访问值,右子节点再调 ...
- P4206[NOI2005]聪聪与可可
链接P4206 [NOI2005]聪聪与可可 类似于开车旅行,如果老鼠确定了那么猫的路线是确定的. 预处理\(g_{i,j}\)表示老鼠在\(i\)号点,猫的下一步方向,\(Bfs\)就行了 设\(f ...
- SQLite和MySQL数据库的差别与应用
简单来说,SQLITE功能简约.小型化,追求最大磁盘效率:MYSQL功能全面,综合化.追求最大并发效率.假设仅仅是单机上用的,数据量不是非常大.须要方便移植或者须要频繁读/写磁盘文件的话.就用SQLi ...
- mysql中各种连接的区别
现在有如下两个表: A表. B表. 一:使用笛卡尔连接 SELECT * FROM a,b 结果: 二:内连接 SELECT * FROM a INNER JOIN b on a.a_id=b.par ...
- php单点登录实现原理实例详解
单点登录SSO(Single Sign On)说得简单点就是在一个多系统共存的环境下,用户在一处登录后,就不用在其他系统中登录,也就是用户的一次登录能得到其他所有系统的信任. 单点登录在大型网站里使用 ...
- POJ 3660 Cow Contest ( 最短路松弛思想应用 && Floyd求传递闭包 )
题意 : 给出 N 头奶牛在比赛的结果,问你最多的能根据给出结果确定其名次的奶牛头数.结果给出的形式为 A B 代表在比赛当中 A 战胜了 B 分析 : 对于一头奶牛来说,如果我们能确定其他 N - ...
- 黑苹果 MacOS 10.15 Catalina安装教程
10.15 Catalina 桌面 一.准备工作 一个8G以上的U盘(有的U盘标的是8G,实际只有7.X,实际容量小于7.5G的会失败) MacOS镜像.TransMac(刻录工具).DiskGeni ...
- 后端技术杂谈7：OpenStack的基石KVM
Qemu,KVM,Virsh傻傻的分不清 本文转载自Itweet的博客 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://gi ...
- Oracle DataGuard日志传输
1. 日志传输方式 有两种日志传输方式(ARC和LGWR),第一种是采用ARC进程传输日志,其示意图如下: 注:上图来自<大话Oracle RAC> 其大致过程如下: 1)主库:日志先写入 ...