YPreLoad
Javascript库
发布我的控件系列:图片预加载控件YPreLoad v1.0
介绍
大家好!很高兴向大家介绍我的图片预加载控件YPreLoad。它可以帮助您预加载图片,并且能显示加载的进度,在预加载完成后调用指定的方法。
YPreLoad控件由一个名为PreLoadImg的类组成。该类的构造函数为:PreLoadImg(images, onstep, onload)
依赖库
用法

new PreLoadImg(
/**
* 图片数据
* id为图片id号,url为图片地址
*/
[
{ id: "a1", url: "a1.png" },
{ id: "a2", url: "a2.png" }
],
/**
* 获得加载进度
* @param currentLoad 已加载的图片数量
* @param imgCount 图片总数
*/
function (currentLoad, imgCount) {
},
/**
* 加载完成后调用
*/
function () {
}
);

效果演示
代码

var PreLoadImg = YYC.Class({
Init: function (images, onstep, onload) {
this._checkImages(images); this.config = {
images: images || [],
onstep: onstep || function () {},
onload: onload || function () {}
};
this._imgs = {};
this.imgCount = this.config.images.length;
this.currentLoad = 0;
this.timerID = 0; this.loadImg();
},
Private: {
_imgs: {}, _checkImages: function (images) {
var i = null; for (var i in images) {
if (images.hasOwnProperty(i)) {
if (images[i].id === undefined || images[i].url === undefined) {
throw new Error("应该包含id和url属性");
}
}
}
},
_bind: function (object, fun) {
return function () {
return fun.apply(object, arguments);
};
}
},
Public: {
imgCount: 0,
currentLoad: 0,
timerID: 0, /**
* 通过图片id号来获得图片对象
* @param id 图片id号
* @returns {*} 图片对象
*/
get: function (id) {
return this._imgs[id];
},
loadImg: function () {
var c = this.config,
img = null,
i,
self = this,
image = null; for (i = 0; i < c.images.length; i++) {
img = c.images[i];
image = this._imgs[img.id] = new Image();
image.onload = function () {
this.onload = null;
self._bind(self, self.onload)();
};
image.src = img.url; this.timerID = (function (i) {
return setTimeout(function () {
if (i == self.currentLoad) {
image.src = img.url;
}
}, 500);
})(i);
}
},
onload: function (i) {
clearTimeout(this.timerID);
this.currentLoad++;
this.config.onstep(this.currentLoad, this.imgCount);
if (this.currentLoad === this.imgCount) {
this.config.onload(this.currentLoad);
}
},
dispose: function () {
var i,
_imgs = this._imgs; for (i in _imgs) {
_imgs[i].onload = null;
_imgs[i] = null;
}
this.config = null;
}
}
});

下载
YPreLoad的更多相关文章
随机推荐
- MvcOptions配置
MvcOptions配置 程序模型处理 IApplicationModelConvention 在MvcOptions的实例对象上,有一个ApplicationModelConventions属性(类 ...
- JS扩展 或 Jquery的扩展写法
<script>//JS扩展String函数test,其它类推String.prototype.test = function(s){ alert(this+s);}var str = ' ...
- crawler_httpclient代理访问
public String getDocumentByProxy(String url) throws ClientProtocolException, IOException { DefaultHt ...
- 【翻译】C#和.NET核心快速参考
原文:[翻译]C#和.NET核心快速参考 PS:在网上看到的一篇C#总结,英文的,总结的还可以,都是基础知识,翻译给大家学习.文章结尾有英文原版.发布地址:http://www.cnblogs.com ...
- ExtJS得知--------Ext.Element学习的查询方法(示例)
详细实例:(实验结果可复制代码后进行演示) Ext.onReady(function(){ Ext.create('Ext.panel.Panel',{//创建一个面板 title:'我的面板' , ...
- 【Java编码准则】の #12不要使用不安全或者强度弱的加密算法
安全性要求高的应用程序必须避免使用不安全的或者强度弱的加密算法,现代计算机的计算能力使得攻击者通过暴力破解能够攻破强度弱的算法.比如,数据加密标准算法DES是极度不安全的,使用类似EFF(Electr ...
- Hack 语言学习/参考---1.2 Hack Background
Hack Background Facebook was initially built with PHP. Parameters and return types were specified in ...
- Cocos2d-x3.0之路--02(引擎文件夹分析和一些细节)
关于怎么搭建好开发环境的我就不写了,网上非常多. 那么 我们来看看 引擎文件的文件夹 所谓知己知彼 百战不殆嘛 先说一下setup.py 这个文件是有关配置的python文件,比方我们在进行andro ...
- JS实现倒计时网页自动跳转(如404页面经常使用到的)
在web前端设计中,我们经常会遇到需要实现页面倒计时跳转的功能,例如在404页面中也会经常使用到此功能,那么如何实现呢,其实实现方法很简单,实现代码如下:<title>JS倒计时网页自动跳 ...
- loadrunner必用函数web_reg_save_param获取多个符合边界值条件的使用方法
在做loadrunner性能脚本开发时,常常碰见一个需求:符合web_reg_save_param函数中定义的左右边界值的值有多个,而我们的常规写法默认返回的是符合条件的第一个,而有时我们却需要使用后 ...