YPreLoad

Javascript库

 

发布我的控件系列：图片预加载控件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" }阅读全文

posted @ 2013-10-14 20:48 码农终结者 阅读(255) | 评论 (0) 编辑

 

发布我的Javascript OOP框架YOOP v1.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库