JavaScript：加载请求本地资源工具StaticResourceUtil.js

功能

loadImages()请求本地图片资源。执行回调函数，返回已加载图片数量、图片总数料、图片对象。

代码

class StaticResourceUtil {constructor(){this.images = {};}/*** 加载本地的图片*/loadImages(jsonURL, callBack){// 1. 创建xhr对象let xhr = new XMLHttpRequest();// 2. AJAX三步走xhr.open('get', jsonURL, true);xhr.send();xhr.addEventListener('readystatechange', ()=>{if(xhr.readyState === 4){if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){// 2.0 已经加载好的图片数量let alreadyLoadNumber = 0;// 2.1 转成json对象let jsonObj = JSON.parse(xhr.responseText);// 2.2 遍历for (let i = 0; i < jsonObj.images.length; i++) {// 2.2.1 创建一个图片对象let image = new Image();// 2.2.2 设置src属性image.src = jsonObj.images[i].src;// 2.2.3 加载完成image.addEventListener('load', ()=>{// 2.2.4 加载完成的图片数量+1alreadyLoadNumber++;// 2.2.5 保存图片对象let key = jsonObj.images[i].name;this.images[key] = image;// console.log(this.images);// 2.2.6 调用回调函数 把 参数返回出去callBack && callBack(alreadyLoadNumber, jsonObj.images.length, this.images);});}}}});}}

使用

首先要有一个json文件，保存资源路径
json格式的文本转化为json对象：
```
JSON.parse(text)
```
实例化静态资源类
```
sr = new StaticResourceUtil();
```

执行图片加载

sr.loadImages('resource.json', (alreadyLoadNum, allNum, imageObj)=>{// alreadyLoadNum 已经加载的数量 allNum 全部图片数量 imageObj 加载的全部图片对象// 7.1 清屏ctx.clearRect(0, 0, canvas.width, canvas.height);// 7.2 打印当前加载的资源数量ctx.font = '30px Microsoft YaHei';ctx.fillText('正在加载游戏需要资源： ' + alreadyLoadNum + '/' + allNum, canvas.width * 0.4, canvas.height * 0.4);// 7.3 判断，游戏是否开始if(alreadyLoadNum === allNum){//7.4 赋值图片资源console.log(imageObj);images = imageObj;// 7.5 开始游戏run();}
});

JavaScript：加载请求本地资源工具StaticResourceUtil.js相关推荐

combotree 可以异步加载吗_Unity AssetBundle 资源打包，加载，本地缓存方式，安卓，PC本地加载路径问题...
AssetBundle的定义和作用: 1,AssetBundle是一个压缩包包含模型.贴图.预制体.声音.甚至整个场景,可以在游戏运行的时候被加载. 2,AssetBundle自身保存着互相的依赖关系 ...
加载调用本地百度地图资源，附地图下载器及黑龙江省1-16级瓦片地图,加载显示marker
业务适用场景说明适用范围,需要局域网或者本地环境加载显示百度地图及展示marker的业务场景,可以根据业务使用场景下载不同地区等级的地图瓦片.由于瓦片文件过大,建议放在本地服务器上. 已有1-16级 ...
【Android 插件化】Hook 插件化框架 ( 加载插件包资源 )
Android 插件化系列文章目录 [Android 插件化]插件化简介 ( 组件化与插件化 ) [Android 插件化]插件化原理 ( JVM 内存数据 | 类加载流程 ) [Android 插件 ...
基于ArcGIS API for JavaScript加载天地图
文章目录前言效果图详细代码总结参考链接前言该篇主要介绍如何用ArcGIS JS API加载天地图,具体应用场景以及需求分析等,在上篇基于ArcGIS API for JavaScript ...
在Arcmap中加载互联网地图资源的4种方法
在Arcmap中加载互联网地图资源的4种方法前一段时间想在Arcmap中打开互联网地图中的地图数据,如影像数据.基础地图数据等,经过简单研究目前总结了四种方法,整理下与大家分享,有些内容可能理解有误 ...
免Root 实现App加载Xposed插件的工具Xpatch源码解析（一）
前言 Xpatch是一款免Root实现App加载Xposed插件的工具,可以非常方便地实现App的逆向破解(再也不用改smali代码了),源码也已经上传到Github上,欢迎各位Fork and St ...
Gatsby 中怎么加载使用文件资源？
一.Gatsby 怎么使用文件资源? 对于图片.音频.视频文.svg.字体等文件,怎么导入Gatsby中? 二.解决方案把文件导入到Gatsby项目中使用,有两种方式:import 和 stati ...
prefetch 和preload_资源预加载preload和资源预读取prefetch简明学习
前面的话基于VUE的前端小站改造成SSR服务器端渲染后,HTML文档会自动使用preload和prefetch来预加载所需资源,本文将详细介绍preload和prefetch的使用资源优先级在介 ...
填坑 ---- arcgis api for javascript 加载天地图
写在前面首先要感谢 arcgis api for javascript 加载天地图这篇文章,帮助我完成了在网页中加载天地图. 在此就不再描述加载天地图的方法与过程,只记录我遇到的一个坑与填坑方法. ...
Cocos Creator用cc.loader加载预制体资源和删除预制体资源
对于小游戏来说,单个场景的页面可以事先写好然后用active的方式来开关. 但是这会导致一个严重的问题就是每次载入这个场景的时候就会很卡,而如果是让场景绑定预制体资源的时候这个场景同时也会加载对应的预 ...

JavaScript：加载请求本地资源工具StaticResourceUtil.js

功能

代码

使用

JavaScript：加载请求本地资源工具StaticResourceUtil.js相关推荐

最新文章

热门文章