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

用法

  1. new PreLoadImg(
  2. /**
  3. * 图片数据
  4. * id为图片id号,url为图片地址
  5. */
  6. [
  7. { id: "a1", url: "a1.png" },
  8. { id: "a2", url: "a2.png" }
  9. ],
  10. /**
  11. * 获得加载进度
  12. * @param currentLoad 已加载的图片数量
  13. * @param imgCount 图片总数
  14. */
  15. function (currentLoad, imgCount) {
  16. },
  17. /**
  18. * 加载完成后调用
  19. */
  20. function () {
  21. }
  22. );

效果演示

代码

  1. var PreLoadImg = YYC.Class({
  2. Init: function (images, onstep, onload) {
  3. this._checkImages(images);
  4.  
  5. this.config = {
  6. images: images || [],
  7. onstep: onstep || function () {},
  8. onload: onload || function () {}
  9. };
  10. this._imgs = {};
  11. this.imgCount = this.config.images.length;
  12. this.currentLoad = 0;
  13. this.timerID = 0;
  14.  
  15. this.loadImg();
  16. },
  17. Private: {
  18. _imgs: {},
  19.  
  20. _checkImages: function (images) {
  21. var i = null;
  22.  
  23. for (var i in images) {
  24. if (images.hasOwnProperty(i)) {
  25. if (images[i].id === undefined || images[i].url === undefined) {
  26. throw new Error("应该包含id和url属性");
  27. }
  28. }
  29. }
  30. },
  31. _bind: function (object, fun) {
  32. return function () {
  33. return fun.apply(object, arguments);
  34. };
  35. }
  36. },
  37. Public: {
  38. imgCount: 0,
  39. currentLoad: 0,
  40. timerID: 0,
  41.  
  42. /**
  43. * 通过图片id号来获得图片对象
  44. * @param id 图片id号
  45. * @returns {*} 图片对象
  46. */
  47. get: function (id) {
  48. return this._imgs[id];
  49. },
  50. loadImg: function () {
  51. var c = this.config,
  52. img = null,
  53. i,
  54. self = this,
  55. image = null;
  56.  
  57. for (i = 0; i < c.images.length; i++) {
  58. img = c.images[i];
  59. image = this._imgs[img.id] = new Image();
  60. image.onload = function () {
  61. this.onload = null;
  62. self._bind(self, self.onload)();
  63. };
  64. image.src = img.url;
  65.  
  66. this.timerID = (function (i) {
  67. return setTimeout(function () {
  68. if (i == self.currentLoad) {
  69. image.src = img.url;
  70. }
  71. }, 500);
  72. })(i);
  73. }
  74. },
  75. onload: function (i) {
  76. clearTimeout(this.timerID);
  77. this.currentLoad++;
  78. this.config.onstep(this.currentLoad, this.imgCount);
  79. if (this.currentLoad === this.imgCount) {
  80. this.config.onload(this.currentLoad);
  81. }
  82. },
  83. dispose: function () {
  84. var i,
  85. _imgs = this._imgs;
  86.  
  87. for (i in _imgs) {
  88. _imgs[i].onload = null;
  89. _imgs[i] = null;
  90. }
  91. this.config = null;
  92. }
  93. }
  94. });

下载

Demo下载

 
 
分类: Javascript库

YPreLoad的更多相关文章

随机推荐

  1. 第22章 职责链模式(Chain of Responsibility)

    原文 第22章 职责链模式(Chain of Responsibility) 职责链模式 导读:职责链模式是一个既简单又复杂的设计模式,刚开始学习这个设计模式的时候光示例都看了好几遍.就为了理清里面的 ...

  2. crawler_java应用集锦9:httpclient4.2.2的几个常用方法,登录之后访问页面问题,下载文件_设置代理

    在工作中要用到android,然后进行网络请求的时候,打算使用httpClient. 总结一下httpClient的一些基本使用. 版本是4.2.2. 使用这个版本的过程中,百度很多,结果都是出现的o ...

  3. Swift学习笔记(一)搭配环境以及代码运行成功

    原文:Swift学习笔记(一)搭配环境以及代码运行成功 1.Swift是啥? 百度去!度娘告诉你它是苹果最新推出的编程语言,比c,c++,objc要高效简单.能够开发ios,mac相关的app哦!是苹 ...

  4. C# Parse和Convert的区别分析(转)

    大家都知道在进行类型转换的时候有连个方法供我们使用就是Convert.to和*.Parse,但是疑问就是什么时候用C 什么时候用P 通俗的解释大家都知道: Convert 用来转换继承自object类 ...

  5. Cracking Microservices practices

    微服务最佳实践 英文原文:Cracking Microservices practices 在我还不知道什么叫微服务架构的时候我就使用过它.以前,我写了一些管道程序(pipeline applicat ...

  6. linux简单的数据包捕获分析

    有时我们会遇到一些问题,需要捕捉数据包分析,当手头有没有专业的抓图工具,您可以使用tcpdump相反,看看(一般版本附带这个工具) 比如,我们要分析eth0与接口192.168.7.188 这个对象I ...

  7. 采用malloc分别分配2KB个人空间,然后,realloc调整到6KB、1MB、3MB、10MB场地,分别这五内存“A”、“B”、“C”、“D”、“E”灌装

    #include<stdio.h> #include<stdlib.h> #include<string.h> #include<malloc.h> i ...

  8. iptables的配置文件/etc/sysconfig/iptables不存在怎么办

    iptables的配置文件/etc/sysconfig/iptables不存在怎么办 首先要看一下iptables是否安装了,使用service iptables status或yum info ip ...

  9. 初创互联网公司简明创业指南 - YC新掌门Sam Altman

    本文只是一个创业指南的简明版 - 更详细的版本请查看:http://startupclass.samaltman.com 创业之前,你更应该去拥有一个好的创意,而不是一个公司.如果开始前你拥有一个好的 ...

  10. dom03

    鼠标事件: 键盘事件: //通过class获取元素,封装一个通过class获取元素的方法 //IE10以下不支持document.getElementByClass() function getByC ...