こんばんは、ころすけ(@wg_koro)です。
今日、久々に「何をやっているのかよー分からん・・・」というjQueryコードと出会いました。
複数の画像があって
[html]
<img src=’gazou.jpg’ id=’pic1′>
<img src=’gazou2.jpg’ id=’pic2′>
[/html]
<img src=’gazou.jpg’ id=’pic1′>
<img src=’gazou2.jpg’ id=’pic2′>
[/html]
それに対するjQueryコードはこんな感じ。
[javascript]
function hoge(elem){
var E = $.Deferred();
elem.load(E.resolve());
return E.promise();
}
function hoge(elem){
var E = $.Deferred();
elem.load(E.resolve());
return E.promise();
}
var $img1 = $(‘#pic1’);
var $img2 = $(‘#pic2’);
var list = [];
list.push(hoge($img1));
list.push(hoge($img2));
$.when.apply(null, list).then(function(){
alert(‘ほげほげ’);
});
[/javascript]
うん、最初何やっているのかさっぱり分かりませんでした。が、あちこちのサイトから情報を集めてやっと分かった。
画像#pic1、画像#pic2、両方のonloadが走ったらalert()させるってことなのね。ふむぅ。jQueryはあまり使わないからすんごい戸惑いましたｗ
あと.load()もわかりにくいですね。ちょっと探して出てきたリファレンスには.load(url, data, callback)とあったのですが、今回はこれに該当せず。何だこれ。
調べると、こういうことらしい。紛らわしい…。
[javascript]
$(‘#pic1’).load(function(){ alert(‘hogehoge’); });
↑は、↓と同じ
$(‘#pic1’).bind(‘load’, funciton(){ alert(‘hogehoge’); });
[/javascript]
$(‘#pic1’).load(function(){ alert(‘hogehoge’); });
↑は、↓と同じ
$(‘#pic1’).bind(‘load’, funciton(){ alert(‘hogehoge’); });
[/javascript]
しかしDeferredって便利だなー。慣れれば使いやすそう。今度使ってみるかな。