いろいろ準備中

[JavaScript] JavaScriptの勉強をかねた画像読み込みの続き

4月 24th, 2008 Posted in javascript, web開発

以前画像の遅延読み込みにいて書いたのですが、最近javascriptをちゃんと勉強しようという気持ちになって、以前はオブジェクトだったものをクラス化したのでアウトプットしておきます。

function LazyLoader() {
    this.initialize.apply(this, arguments);
}
LazyLoader.prototype = {
    altimg: 'images/foo.png', // サイズの小さい代替画像
    initialize: function(id) {
        this.id = id;
        this.images = [];
    },
    stopLoadingImages: function() {
        var filter = "#"+this.id+" img";
        var base = this;
        $$(filter).each(function(img) {
            img.orgSrc = img.src;
            img.src = base.altimg
            base.images.push(img);
        });
    },
    loadImages: function() {
        this.images.each(function(image) {
            image.src = img.orgSrc
        });
    }
};

domready.jsを使ってDOMの読み込みを検知しているときは、

var loader = new LazyLoader(id);
Event.domReady.add(loader.stopLoadingImages());

のように書きます。

前回のときは、遅延読み込みを行うDOMのid（というよび方でいいのか？）が固定だったのですが、今回はインスタンス生成時の引数で設定できるようにしてあります。

クラス化する際にjavascript初心者が躓いたところは、

var base = this;
$$(filter).each(function(img) {
    img.orgSrc = img.src;
    img.src = base.altimg
    base.images.push(img);
});

で、var base = this; をしないとbase.images.push(img) ができなかったところです。
最初は、var base = this はしないで、 this.images.push(img) としていたのですが、$$(filter).each()の中でthisの指すものが変わっていたので、ちょっと気持ち悪かったのですがこのようにしました。

あとは、LazyLoaderクラスのidとimagesプロパティですが、

LazyLoader.prototype = {
    id: null,
    images: [],
    initialize: function(id) {
        this.id = id;
    },
    ...
}

とするか

LazyLoader.prototype = {
    initialize: function(id) {
        this.id = id;
        this.images = [];
    },
    ...
}

とするかで意味が違うということをはじめは知りませんでした。前者クラスプロパティで、後者はインスタンスプロパティになるようですね。javascriptのクラスがプロトタイプベースであるということを再確認できました。どうちがうのか勉強中です。

今回は両方ともインスタンスプロパティにしてあります。

コメントを投稿する