以前画像の遅延読み込みにいて書いたのですが、最近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](http://weblog.metareal.org/2007/07/10/domready-js-cross-browser-ondomcontentloaded/)を使って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 = []; }, … }