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. MvcOptions配置

    MvcOptions配置 程序模型处理 IApplicationModelConvention 在MvcOptions的实例对象上,有一个ApplicationModelConventions属性(类 ...

  2. JS扩展 或 Jquery的扩展写法

    <script>//JS扩展String函数test,其它类推String.prototype.test = function(s){ alert(this+s);}var str = ' ...

  3. crawler_httpclient代理访问

    public String getDocumentByProxy(String url) throws ClientProtocolException, IOException { DefaultHt ...

  4. 【翻译】C#和.NET核心快速参考

    原文:[翻译]C#和.NET核心快速参考 PS:在网上看到的一篇C#总结,英文的,总结的还可以,都是基础知识,翻译给大家学习.文章结尾有英文原版.发布地址:http://www.cnblogs.com ...

  5. ExtJS得知--------Ext.Element学习的查询方法(示例)

    详细实例:(实验结果可复制代码后进行演示) Ext.onReady(function(){ Ext.create('Ext.panel.Panel',{//创建一个面板 title:'我的面板' , ...

  6. 【Java编码准则】の #12不要使用不安全或者强度弱的加密算法

    安全性要求高的应用程序必须避免使用不安全的或者强度弱的加密算法,现代计算机的计算能力使得攻击者通过暴力破解能够攻破强度弱的算法.比如,数据加密标准算法DES是极度不安全的,使用类似EFF(Electr ...

  7. Hack 语言学习/参考---1.2 Hack Background

    Hack Background Facebook was initially built with PHP. Parameters and return types were specified in ...

  8. Cocos2d-x3.0之路--02(引擎文件夹分析和一些细节)

    关于怎么搭建好开发环境的我就不写了,网上非常多. 那么 我们来看看 引擎文件的文件夹 所谓知己知彼 百战不殆嘛 先说一下setup.py 这个文件是有关配置的python文件,比方我们在进行andro ...

  9. JS实现倒计时网页自动跳转(如404页面经常使用到的)

    在web前端设计中,我们经常会遇到需要实现页面倒计时跳转的功能,例如在404页面中也会经常使用到此功能,那么如何实现呢,其实实现方法很简单,实现代码如下:<title>JS倒计时网页自动跳 ...

  10. loadrunner必用函数web_reg_save_param获取多个符合边界值条件的使用方法

    在做loadrunner性能脚本开发时,常常碰见一个需求:符合web_reg_save_param函数中定义的左右边界值的值有多个,而我们的常规写法默认返回的是符合条件的第一个,而有时我们却需要使用后 ...