发布我的图片预加载控件YPreLoadImg v1.0

介绍

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

YPreLoadImg控件由一个名为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下载