Javascript库

 
摘要: 介绍大家好!很高兴向大家介绍我的图片预加载控件YPreLoad。它可以帮助您预加载图片,并且能显示加载的进度,在预加载完成后调用指定的方法。YPreLoad控件由一个名为PreLoadImg的类组成。该类的构造函数为:PreLoadImg(images, onstep, onload)依赖库YOOP用法new PreLoadImg( /** * 图片数据 * id为图片id号,url为图片地址 */ [ { id: "a1", url: "a1.png" }, { id: "a2", url: "a2.png" }阅读全文
posted @ 2013-10-14 20:48 码农终结者 阅读(255) | 评论 (0) 编辑
 
摘要: 大家好!今天我正式发布我的OOP框架YOOP 1.0版本!该框架将帮助开发者更好地进行面向对象编程。介绍该框架包含接口、抽象类、类。接口Interface可以继承多个接口,可以定义方法、属性。抽象类AClass可以继承多个接口、一个抽象类,可以定义构造函数、公有成员、私有成员、保护成员、静态成员、虚方法、抽象成员。类Class可以继承多个接口、一个抽象类或类,可以定义构造函数、公有成员、私有成员、保护成员、静态成员、虚方法。子类调用父类成员在子类中,可以使用this.base()来调用父类同名方法。也可以使用this.baseClass来访问父类的原型。主要的语法规则如果企图声明虚属性,会抛出阅读全文
posted @ 2013-06-07 16:18 码农终结者 阅读(1031) | 评论 (16) 编辑

发布我的控件系列:图片预加载控件YPreLoad v1.0

 

介绍

大家好!很高兴向大家介绍我的图片预加载控件YPreLoad。它可以帮助您预加载图片,并且能显示加载的进度,在预加载完成后调用指定的方法。

YPreLoad控件由一个名为PreLoadImg的类组成。该类的构造函数为:PreLoadImg(images, onstep, onload)

依赖库

YOOP

用法

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;
}
}
});

下载

Demo下载

 
 
分类: Javascript库

YPreLoad的更多相关文章

随机推荐

  1. 【云图】如何制作全国KTV查询系统?

    原文:[云图]如何制作全国KTV查询系统? 摘要:本文以[唱吧]531麦霸音乐节为案例,详细解读了如何导入自有数据到高德云图,并进行检索和展示.最后,调起高德mobile地图来进行路线规划和周边查询. ...

  2. Swift中文教程(四)--函数与闭包

    原文:Swift中文教程(四)--函数与闭包 Function 函数 Swift使用func关键字来声明变量,函数通过函数名加小括号内的参数列表来调用.使用->来区分参数名和返回值的类型: fu ...

  3. UVa 740 - Baudot Data Communication Code

    称号:目前编码,他们shift键被按下,并提出,对应的两个编码,其中,2相应的编码shift操作. 给你适当的编码值.寻求相应的字符串. 分析:模拟.字符串. 简单题,标记shift的升降分类处理就可 ...

  4. 开始 space viking 之旅

     设备 cocos2d-v2 眼下cocos2d-v3也不太稳定,它在很大程度上仍然是变化的功能. 对于稳定.我们仍然使用 v2 wget -c http://cocos2d-iphone.goo ...

  5. LeetCode——Spiral Matrix

    Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spiral or ...

  6. Struts2_2_第一Struts2应用

    web.xml文件的配置与1同样. 1)HelloWorld类的代码: public class HelloWorldAction { private String message; public S ...

  7. Linq to Sql : 三种事务处理方式

    原文:Linq to Sql : 三种事务处理方式 Linq to SQL支持三种事务处理模型:显式本地事务.显式可分发事务.隐式事务.(from  MSDN: 事务 (LINQ to SQL)).M ...

  8. Hybrid

    “榕树下·那年”移动app ( hybrid ) 开发总结   榕树下网站本身的技术人员并不多,所以app开发的任务就到了母公司盛大文学这边.       盛大文学无线业务中心负责这次具体开发任务. ...

  9. DDD分层架构之聚合

    DDD分层架构之聚合 前面已经介绍了DDD分层架构的实体和值对象,本文将介绍聚合以及与其高度相关的并发主题. 我在之前已经说过,初学者第一步需要将业务逻辑尽量放到实体或值对象中,给实体“充血”,这样可 ...

  10. Spring IOC之容器扩展点

    一般来说,一个应用开发者不需要继承ApplicationContext实现类.取而代之的是,Spring IoC容器可以通过插入特殊的整合接口的实现来进行扩展.下面的几点将要讲述这些整合的接口. 1. ...