一、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
分享到：
相关推荐
【JavaScript图像压缩器——imagecompressor详解】 在现代网页应用中，用户经常需要上传图片，而未经处理的大尺寸图片不仅占用存储空间，也可能导致页面加载速度变慢，影响用户体验。为了解决这个问题，开发者通常...
以上只是可能包含的部分JavaScript知识点，实际的"70多个JavaScript实用特效代码集"可能会涵盖更多内容，例如图像处理、表单验证、拖放功能、游戏开发等等。对于学习和提升JavaScript技能，这样的代码集是宝贵的资源...
### JavaScript实用代码大全：事件处理、DOM操作与高级功能 #### 一、事件处理与键盘交互 在JavaScript中，事件处理是与用户交互的核心部分。以下是一些关键的事件属性和方法： - **事件源**: `event.srcElement`...
【图像查看器baidu google】是一款基于jQuery技术开发的图像浏览工具，它的设计灵感来源于知名的搜索引擎...同时，对于普通用户来说，这款图像查看器提供了与大型搜索引擎类似的图片浏览体验，无疑是一个实用的工具。
本文将深入探讨如何利用JavaScript来实现实时监控并显示图像加载的状态。 首先，我们需要创建一个HTML结构，包括一个`<img>`元素和一个用于显示加载状态的`<div>`元素。`<img>`元素的`src`属性设置为待加载的图像...
7. **其他特效**：还有许多其他特效，比如轮播图、弹出框、提示信息、页面加载进度条、全屏背景滚动、地图交互等，这些都是JavaScript在网页设计中常见的应用。 这个资源包中的"超酷超实用javascript特效100个"应该...
JavaScript可以用来加载、显示、修改图片，或者利用Canvas API进行复杂的图像操作。库如`Fabric.js` 提供了丰富的图像操作功能。 6. **网格布局（Grid Table）**： - `gridtable` 可能是指使用JavaScript实现的...
11. **图像处理**：Canvas API允许JavaScript进行像素级别的图像操作，实现滤镜、动画、画图应用等。 12. **AJAX异步通信**：JavaScript通过XMLHttpRequest对象实现页面无刷新的数据交换，改进网页的加载速度和用户...
总的来说，JavaScript特效大全是一个宝贵的资源，无论是对于初学者还是经验丰富的开发者，都能从中学习到如何用JavaScript来实现各种创意和实用的网页特效。通过深入理解和实践这些代码，可以提升开发者的JavaScript...
它允许开发者为图像加载完成这一事件添加回调函数，从而在图片完全加载后执行特定的操作，这在优化用户体验和处理图片依赖性操作时非常有用。 首先，我们来了解一下jQuery插件的基本结构。一个标准的jQuery插件通常...
- **SVG矢量图形**：允许开发者使用矢量图形，提高图像质量的同时减少了加载时间。 - **拖放功能**：支持用户直接将文件从桌面拖放到网页上。 - **表单控件增强**：新增了日期选择器、电子邮件验证等功能，简化了...
在JavaScript（JS）中处理图像并进行距离测量是一项有趣且实用的任务，常见于地图应用、建筑图纸查看器或在线设计工具。本项目提供了一个用JS编写的解决方案，它允许用户在图像上测量并保存实际距离，这对于那些需要...
《jQuery SVG图像生成器...总结，jQuery SVG图像生成器插件是一个实用的开发工具，它简化了SVG图像的生成过程，提高了网页的视觉效果和性能。通过深入理解和应用，开发者可以更好地利用SVG技术，提升网站的用户体验。
15.29 用JavaScript导出图像到Excel 15.30 使用VML打造可改变大小的圆框 15.31 JavaScript实现文档结构图 15.32 判断一副图片是否加载完毕 第16章 页面数据的验证 16.1 验证字符串是否全由数字组成 16.2 验证表单项...
通过学习和实践，开发者可以利用JavaScript创造出各种令人惊叹的视觉和交互体验，提高网站的吸引力和实用性。而标签中的“源码”和“工具”则意味着这些特效可能已经封装成可直接使用的代码片段，方便开发者快速集成...
以上只是JavaScript特效的一部分，实际中还有许多其他创新和实用的效果。开发者可以根据项目需求，选择合适的特效来提升网页的吸引力和用户体验。这个压缩包里的"Javascript特效"文件很可能是包含这些示例代码和教程...
【标题】"bpg2jpg:纯JavaScript BPG到JPEG图像转换器" 是一个专门用于将BPG格式图像转换为JPEG格式的JavaScript库。BPG（Better Portable Graphics）是一种先进的图像压缩格式，由FFmpeg项目开发，旨在提供比JPEG更...
插件的使用方法通常是引入jQuery库和插件的JavaScript文件，然后在DOM加载完成后，通过选择器选中要添加标注的图像元素，调用插件提供的初始化函数。例如： ```javascript $(document).ready(function() { $('img....
15.29 用JavaScript导出图像到Excel 15.30 使用VML打造可改变大小的圆框 15.31 JavaScript实现文档结构图 15.32 判断一副图片是否加载完毕 第16章 页面数据的验证 16.1 验证字符串是否全由数字组成 16.2 验证表单项...
"网页特效复选框全选、全不选和反选"是增强复选框功能的JavaScript实现，使得用户可以方便地对一组复选框进行批量操作，如全选、全不选或反选，这对于数据筛选和管理非常实用。 压缩包中的各个HTML文件展示了这些...