一、HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>javascript实用图像加载器</title>
<script type="text/javascript" src="resources.js"></script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>
<script>
//使用方法：
resources.load(['img/sprites.png','img/terrain.png']);
resources.onReady(start);
function start(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img=resources.get("img/sprites.png");
ctx.drawImage(img,0,0);
}
</script>
二、图像加载器resources.js
(function() {
var resourceCache = {};//缓存器
var loading = [];
var readyCallbacks = [];//回调函数集合
// Load an image url or an array of image urls
function load(urlOrArr) {
if(urlOrArr instanceof Array) {
urlOrArr.forEach(function(url) {
_load(url);
});
}
else {
_load(urlOrArr);
}
}
function _load(url) {
if(resourceCache[url]) {
return resourceCache[url];//如果缓存器中有，直接从缓存器中取数据
}
else {
var img = new Image();
img.onload = function() {
resourceCache[url] = img;
if(isReady()) {//图像加载完毕，执行所有回调函数
readyCallbacks.forEach(function(func) { func(); });
}
};
resourceCache[url] = false;
img.src = url;
}
}
//从缓存器中取数据
function get(url) {
return resourceCache[url];
}
//检查图像是否加载完毕
function isReady() {
var ready = true;
for(var k in resourceCache) {
if(resourceCache.hasOwnProperty(k) &&
!resourceCache[k]) {
ready = false;
}
}
return ready;
}
//将回调函数加入
function onReady(func) {
readyCallbacks.push(func);
}
window.resources = {
load: load,
get: get,
onReady: onReady,
isReady: isReady
};
})();
下载源代码及效果：
http://www.108js.com/article/article3/30171.html
分享到：
相关推荐
15.29 用JavaScript导出图像到Excel 15.30 使用VML打造可改变大小的圆框 15.31 JavaScript实现文档结构图 15.32 判断一副图片是否加载完毕 第16章 页面数据的验证 16.1 验证字符串是否全由数字组成 16.2 验证表单项...
15.29 用JavaScript导出图像到Excel 15.30 使用VML打造可改变大小的圆框 15.31 JavaScript实现文档结构图 15.32 判断一副图片是否加载完毕 第16章 页面数据的验证 16.1 验证字符串是否全由数字组成 16.2 验证表单项...
第3章 实用JavaScript函数 129 3.1 数据验证 130 实例084 通过正则表达式验证日期 130 实例085 验证输入的日期格式是否正确 132 实例086 检查表单元素是否为空 134 实例087 验证E-mail是否正确 135 实例088 通过正则...
28. jQuery实现图片取景器仿相机拍照功能的插件photoShoot 29. jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 30. jquery实现图片可拖动展示的实例下载 31. jQuery实现拖动滚动条的缩略图排列插件下载...
8.13 在AJAX异步调用时显示加载指示器 8.14 在AJAX异步调用时处理JSON数据 8.15 解析XML数据并加载到HTML表格 8.16 jQuery AJAX错误的处理方法 8.17 在页面级创建全局的AJAX监听器以及状态指示器 8.18 级联AJAX数据...
3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery...
安装pixelworks包旨在用于具有 CommonJS 模块加载器（例如或 ）的浏览器。 使用npm将其作为依赖项添加到您的项目中： npm install pixelworks采用 var pixelworks = require('pixelworks');应用程序接口new ...
该虚拟白板具有以下功能：耳塞，撤消，重做，不同的颜色，放大和缩小，平移和下载为jpg格式的图像，所有这些都可以通过键盘界面进行。后端使用PHP和使用“ localhost” phpMyAdmin的本地数据库构建后端。Futrure...
jQuery的图像转换器 简单的jQuery插件，可以用动画切换图像。 演示版 特征 在悬停事件中打开和关闭图像（您可以在选项中将其禁用） 可以更改后缀 支持一些过渡 支持触摸设备 过渡过渡 支持background-image切换 在...
Require.js-一个JavaScript文件和模块加载器。 Tachyons-一个原子CSS库。 xwing-data -X-Wing：Fantasy Flight Games制作的微型游戏中的数据和图像的易于使用的集合。 xwing-miniatures-font -X翼的矢量字体：...
实用手册 Xnllz 2011.7.29 目录 第一章COMS的设置 1 1．STANDARD CMOS SETUP（标准CMOS设定）用来设定日期、时间、软硬盘规格、工作类类型。 3 2．BIOS能功设定 5 3．Advanced Chipset Features...
| | | :rocket: 技术 Projeto desenvolvido包含一个堆栈。 Apresentando os conceitosbásicosda stack。 :laptop: 普罗耶托 Nesse projetocontémos primeiros conceitos do React.js。...图像加载器 ConceitosRea
轻量级生产就绪的Gulp启动器。 OptimizedHTML 5-具有Gulp 4 ，预处理器（Sass，Scss，Less，Stylus） ， clean-css ， Browsersync ， Autoprefixer ， webpack-stream ， Babel ， Rsync ， CSS Reboot ...
赛前＃=>用于将图像加载到DOM中 long_menu ＃=>用于控制长引导菜单的溢出而不使用overflow-y：hidden（在IE中看起来像废话） jutils ＃=>一个非常轻量级的跨浏览器实用程序对象，用于DOM操作（事件处理程序，查找器...
3.2.1 简单的样式转换器 3.2.2 简写的事件 3.3 复合事件 3.3.1 显示和隐藏高级特性 3.3.2 突出显示可单击的项 3.4 事件的旅程 3.5 通过事件对象改变事件的旅程 3.5.1 事件目标 3.5.2 停止事件传播 3.5.3 ...
-Symfony的惰性图像加载器和实用程序（今天） -MercureBundle允许使用Mercure协议轻松地将更新推送到Symfony全栈框架中的Web浏览器和其他HTTP客户端。 （今天） -Symfony的Chart.js集成（今天） -Symfony的...
10.3 动态加载数据 356 第2篇 文件管理篇 第11章 文件基本操作及文件上传下载 372 11.1 文件的基本操作 373 11.2 无组件的文件上传 412 11.3 通过组件实现文件上传 418 11.4 文件下载 428 第12章 文件的批量管理 436...
10.3 动态加载数据 356 第2篇 文件管理篇 第11章 文件基本操作及文件上传下载 372 11.1 文件的基本操作 373 11.2 无组件的文件上传 412 11.3 通过组件实现文件上传 418 11.4 文件下载 428 第12章 文件的批量管理 436...
然后加载并转换您的图像。 skinConverter.convert(originalSkin, function(error, convertedSkin){ // originalSkin is the 64x32 version of the skin // convertedSkin is the 64x64 version of the skin }); ...