业务场景

用户创建自己的页面，给创建好的内容页面增加皮肤效果。选择某一皮肤后，当该皮肤中的所有图片都加载完后，再展示皮肤效果；加载图片的时候展示loading效果。

部分页面展示如下：

工具代码

在utils.js文件中写如下代码，当图片加载完成后执行callback函数：

export function loadImageEnd(list, callback, basePath) {if (!list || list.length === 0) return;if (basePath) list = list.map(item => basePath + item);let img = new Image();img.data = {list: list,callback: callback,resultList: [],num: 0}img.addEventListener("load", loadImgHandler);img.addEventListener("error", loadImgHandler);img.src = list[img.data.num];
}function loadImgHandler(e) {let data = e.currentTarget.data;if (e.type !== 'error') {data.resultList.push(e.currentTarget.cloneNode(false));}data.num++;if (data.num > data.list.length - 1) {e.currentTarget.removeEventListener("load", loadImgHandler);if (data.callback) {data.callback(data.resultList);}data = null;return;}e.currentTarget.src = data.list[data.num];
}

使用

第一个参数为所有图片路径的数组。
第二个参数为所有图片加载完成后的回调函数。
第三个参数为所有图片的前置路径，如果已经是完整路径，则不需要传此参数。

import { loadImgEnd ) from '@/utils'
export default {data(){return {isLoading:true}},methods:{//选择皮肤的事件clickHandle(id){let imgArr = [];//当前皮肤中所有的图片路径loadImgEnd(imgArr,()=>{this.isLoading = false;})}}
}

vue项目中使用Js判断图片是否加载完所有图片加载完成前展示Loading效果相关推荐

vue项目中，js根据文件名后缀，判断文件图片、视频、文档、pdf等类型的方法
vue项目中,在获得文件名信息,需要根据文件名的后缀来区分文件类型的方法如下:其中,文件后缀可自由拓展. // 根据文件名后缀区分文件类型/** @param: fileName - 文件名称* @ ...
vue项目中img使用svg图片修改颜色
需求:就是左边是文字,右边是文字,中间是一个箭头图片前言:抛开vue项目已经封装好了svg的组件这种来讲,封装的可以直接使用color来进行改变颜色,然后这里讲下没有封装的写法 1:首先改svg图片 ...
Vue项目中实现消息提示/报警/未读消息（铃铛加小圆点闪烁效果）
在项目开发过程中,可能需要实现以下场景:未读消息提示.报警信息.消息通知等,这些功能往往是在页面的右上角设置一个铃铛,在铃铛或者图标的右上角显示消息数并做呼吸灯效果显示下面分享一下这类效果的实现方法 ...
关于vue项目中在js中引入图片问题
<template> <div> <img v-for="(star,index) in stars" :src="star.src&quo ...
vue项目中，图片无法显示时或者访问图片出现404时，显示默认图片，但默认图片路径出错
问题描述在vue项目中,同样的图片,设置在img的src中能正常显示设置在img的onerror中不能正常显示原因项目启动后, 图片的路径并不是我们写的路径了. 示例: 源代码: // 直 ...
Vue - 项目中使用iconfont（阿里图标库）
项目中如何使用iconfont(阿里图标库) 一. 登陆iconfont官网: https://www.iconfont.cn/ 二. 创建一个图标项目 1.点击"图标管理"子目录 ...
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能需求:在pdf中鼠标滑动选中一段文字,将选中文字展示到input框中(pdf在iframe中) 完成效果: 关于pdf的引用:我是直接 ...
svg图片在vue项目中的应用
svg图片在vue项目中的应用一.安装 svg-sprite-loader 插件 npm install svg-sprite-loader 二.基于 vue-cli2.x 项目 webpack 配 ...
vue 项目中使用three.js实现vr360度全景图片预览
vue 项目中使用three.js实现vr360度全景图片预览当前demo使用的three.js为0.115.0版本项目中安装three npm install three 安装完成再组件如下导入 ...
Vue项目中最简单的使用集成UEditor方式，含图片上传
Vue 3 项目参考这里前言封面是UEditor的百度指数折线图.虽然今天已经是 2018 年,且优秀的富文本编辑器层出不穷(包括移动端),但从图中可以看出UEditor仍然维持着较高的搜索热 ...

vue项目中使用Js判断图片是否加载完所有图片加载完成前展示Loading效果

业务场景

工具代码

使用

vue项目中使用Js判断图片是否加载完所有图片加载完成前展示Loading效果相关推荐

最新文章

热门文章

vue项目中使用Js判断图片是否加载完 所有图片加载完成前展示Loading效果

业务场景

工具代码

使用

vue项目中使用Js判断图片是否加载完 所有图片加载完成前展示Loading效果相关推荐

最新文章

热门文章

vue项目中使用Js判断图片是否加载完所有图片加载完成前展示Loading效果

vue项目中使用Js判断图片是否加载完所有图片加载完成前展示Loading效果相关推荐