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的更多相关文章
随机推荐
- 一些有用的javascript实例分析(一)
原文:一些有用的javascript实例分析(一) 本文以http://fgm.cc/learn/链接的实例索引为基础,可参见其实际效果.分析和整理了一些有用的javascript实例,相信对一些初学 ...
- HDU Group
Group 题目: 给出n个数,是1-n的排列.要求你每次给你一个区间求出这个区间能够被分成的小区间个数. 一个不连续的数能够被分成一个小区间.t-1,t或t,t+1表示连续. 算法: 高速做法应该是 ...
- opencv2对于读书笔记——二值化——thresholded功能
opencv二进制图象值功能threshold功能 其结构 double cv::threshold( //二值化函数 const CvArr* src, //原始图像 CvArr* dst, //输 ...
- crawler_java应用集锦9:httpclient4.2.2的几个常用方法,登录之后访问页面问题,下载文件_设置代理
在工作中要用到android,然后进行网络请求的时候,打算使用httpClient. 总结一下httpClient的一些基本使用. 版本是4.2.2. 使用这个版本的过程中,百度很多,结果都是出现的o ...
- Eclipse的安装及汉化图解
Eclipse的安装及汉化图解 Eclipse的安装 有了JDK,你可以编译Java源码,运行Java程序,但是还没有代码编辑器,没有版本管理工具,也不能方便的管理工程文件,不能与团队协作.安装Ecl ...
- OData语法
OData 1-4 OData语法(上) 如果眼下提供OData的服务地址是 http://localhost:9527/ODataService.svc 提供的服务内容例如以下所看到的 (提供了一个 ...
- 【百度地图API】如何实现信息窗口轮询
原文:[百度地图API]如何实现信息窗口轮询 摘要: 很多微博或者SNS开发者,想结合地图展示用户的微博或者状态.这时,利用信息窗口就是最好的展示方式了. 在这里,我们使用信息窗口轮询的方式来实现这一 ...
- 【.NET特供-第三季】ASP.NET MVC系列:MVC与三层图形对照
近期在开发小组在研究:BS项目中是利用'MVC框架'还是继续沿用'三层'的问题. 由于曾经的.NET项目大多数都是利用三层开发的,所以大多数人都可以对三层进行熟练地运用.而项目的開始我们也曾听说过MV ...
- Utility Classes Are Evil
原文地址:http://alphawang.com/blog/2014/09/utility-classes-are-evil/ This post is a summary of this arti ...
- ubuntu12.04管理员账户登录不了桌面,仅仅能客人会话登录
ubuntu12.04管理员账户登录不了桌面,仅仅能客人会话登录 求助!!ubuntu12.04管理员账户登录不了桌面,仅仅能客人会话登录. 登录管理员账户时,输入password后,一直在登录界面循 ...