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的更多相关文章
随机推荐
- 【云图】如何制作全国KTV查询系统?
原文:[云图]如何制作全国KTV查询系统? 摘要:本文以[唱吧]531麦霸音乐节为案例,详细解读了如何导入自有数据到高德云图,并进行检索和展示.最后,调起高德mobile地图来进行路线规划和周边查询. ...
- Swift中文教程(四)--函数与闭包
原文:Swift中文教程(四)--函数与闭包 Function 函数 Swift使用func关键字来声明变量,函数通过函数名加小括号内的参数列表来调用.使用->来区分参数名和返回值的类型: fu ...
- UVa 740 - Baudot Data Communication Code
称号:目前编码,他们shift键被按下,并提出,对应的两个编码,其中,2相应的编码shift操作. 给你适当的编码值.寻求相应的字符串. 分析:模拟.字符串. 简单题,标记shift的升降分类处理就可 ...
- 开始 space viking 之旅
设备 cocos2d-v2 眼下cocos2d-v3也不太稳定,它在很大程度上仍然是变化的功能. 对于稳定.我们仍然使用 v2 wget -c http://cocos2d-iphone.goo ...
- LeetCode——Spiral Matrix
Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spiral or ...
- Struts2_2_第一Struts2应用
web.xml文件的配置与1同样. 1)HelloWorld类的代码: public class HelloWorldAction { private String message; public S ...
- Linq to Sql : 三种事务处理方式
原文:Linq to Sql : 三种事务处理方式 Linq to SQL支持三种事务处理模型:显式本地事务.显式可分发事务.隐式事务.(from MSDN: 事务 (LINQ to SQL)).M ...
- Hybrid
“榕树下·那年”移动app ( hybrid ) 开发总结 榕树下网站本身的技术人员并不多,所以app开发的任务就到了母公司盛大文学这边. 盛大文学无线业务中心负责这次具体开发任务. ...
- DDD分层架构之聚合
DDD分层架构之聚合 前面已经介绍了DDD分层架构的实体和值对象,本文将介绍聚合以及与其高度相关的并发主题. 我在之前已经说过,初学者第一步需要将业务逻辑尽量放到实体或值对象中,给实体“充血”,这样可 ...
- Spring IOC之容器扩展点
一般来说,一个应用开发者不需要继承ApplicationContext实现类.取而代之的是,Spring IoC容器可以通过插入特殊的整合接口的实现来进行扩展.下面的几点将要讲述这些整合的接口. 1. ...