01月27日
jQuery1.4いいね！～$.proxy編～ とJSで動的に画像読込
jQueryも1.4にバージョンアップして、高速化しただけじゃなくていろいろ機能追加されてるそうで。
偶然KAYACさんのところで紹介されてて、感動してしまった機能をここでもご紹介。
それは…
$.proxy()
Takes a function and returns a new one that will always have a particular scope.
ということなので、関数を与えると特定のスコープを常に持った新しい関数を返しますよ、という訳であってるんだと思うんですが…
本家のサイトにあるサンプルでは
JAVASCRIPT:
-
var obj = {
-
name: "John",
-
test: function() {
-
alert( this.name );
-
$("#test").unbind("click", obj.test);
-
}
-
};
-
-
$("#test").click( jQuery.proxy( obj, "test" ) );
はい、便利ですね～
と、ちょうど作ってたのがJSでの動的な画像の読み込み。
FirefoxやChromeだと、普通に要素のsrc属性に画像のURLを指定してあげれば読み込み完了と同時に画像を差し替えてくれるのですが、そこはホラ、IEですよ、奥さん。
Imageオブジェクトのcompleteプロパティを監視してtrueになったときにsrcに突っ込んであげないと画像を切り替えてくれない、というオマケ付きな訳なんですよ…orz
そこで、setIntervalで定期的にループさせてプロパティを監視することに。
ということは読み込みが完了したときにはclearIntervalでループを止めないといけないですよね～
そんな時に、この$.proxy()が役に立つ！
JAVASCRIPT:
-
function ImageLoad() {
-
this.img=new Image();
-
};
-
-
ImageLoad.prototype = {
-
changeImage:function(e, s) {
-
this.elm = e;
-
-
this.img.src = s;
-
-
this.timer = setInterval($.proxy(function() {
-
if (this.img.complete) {
-
$(this.elm).attr('src', this.img.src);
-
clearInterval(this.timer);
-
-
}
-
}, this), 200);
-
}
-
};
-
-
var img = new ImageLoad();
-
-
$('hoge').click(function() {
-
img.changeImage('#image', 'path/to/image.jpg');
-
});
こんな感じで使えます。
$.proxy()が無いと、thisのスコープが変わっちゃうので、なんか適当な変数を用意して、とかちょっと力業で実装したりかと思うのですが、綺麗にコーディングできますね！
いや～いいですね！jQuery1.4！
他にも素敵な機能追加があったりするので、また紹介できれば。
コメント & トラックバック
コメントフィード
コメント