图片预加载
2016-01-12 16:36
363 查看
直接添加代码
function ImagePreloader(images, call-back) { // 保存回调函数 this.call-back = call-back; // 状态初始化. this.nLoaded = 0; this.nProcessed = 0; this.aImages = new Array; // 记录图片的数量. this.nImages = images.length; // 对每个图片都调用preload函数 for ( var i = 0; i < images.length; i++ ) this.preload(images[i]); }
回调函数被保存到以后使用,每个图片的URL被传递到
preload()里。
ImagePreloader.prototype.preload = function(image) { // 生成新的`Image`对象然后添加到数组中 var oImage = new Image; this.aImages.push(oImage); //添加事件处理 oImage.onload = ImagePreloader.prototype.onload; oImage.onerror = ImagePreloader.prototype.onerror; oImage.onabort = ImagePreloader.prototype.onabort; oImage.oImagePreloader = this; oImage.bLoaded = false; oImage.src = image; }
oImage.oImagePreloader = this;可以将回调函数保存在Image对象中;
oImage.bLoaded = false;可用来标记图片加载成功还是失败。
图片的src属性要最后赋给,这样才可以使用onload进行判断。
ImagePreloader.prototype.onComplete = function() { this.nProcessed++; if ( this.nProcessed == this.nImages ) { this.call-back(this.aImages, this.nLoaded); } } ImagePreloader.prototype.onload = function() { this.bLoaded = true; this.oImagePreloader.nLoaded++; this.oImagePreloader.onComplete(); } ImagePreloader.prototype.onerror = function() { this.bError = true; this.oImagePreloader.onComplete(); } ImagePreloader.prototype.onabort = function() { this.bAbort = true; this.oImagePreloader.onComplete(); }
相关文章推荐
- Web App 响应式页面制作 笔记整理
- 你必须知道的28个HTML5特征、窍门和技术
- java中文件读取操作
- ubuntu提示"您的当前网络有.local域,网络服务探测被禁用"
- android canvas drawBitmap方法详解
- Quartz 2D之基本图形绘制
- JApiTest的selenium测试脚本
- svn建立分支和svn代码合并的操作方法
- Unity3D入门
- linux文件操作学习1
- uva1146Now or later飞机调度【2-SAT】入门题
- gradle失败
- 安装office2010时出现1402错误
- 从30岁到35岁:为你的生命多积累一些厚度
- 从零开始搭建微信硬件开发环境全过程——1小时掌握微信硬件开发流程
- jQuery动画效果图片轮播特效
- Android 内存泄露检测工具 LeakCanary 的监控原理
- window下node版本管理
- 华为机试——翻译电话号码
- Hibernate不调用update却自动更新