読み込んだAmazonの商品画像のサイズを、これで調整しているのですが、

【メモ】 画像の縦横比を維持したまま、画像サイズを一定の範囲内に縮小 - nplll

どうも調整に失敗することが多くて上手く行かない。
どうやら、jQueryを読み込む前に処理を行おうとして失敗してるみたい。
GoogleからjQueryライブラリを読み込んでるせいかな?

おや。


解決策: jQueryを読み込み終わるのを待って処理をするようにSetTimeoutを設定する。

参考

うのらぼ。 - 【JavaScript】jQueryの読み込み待ちとか関数の処理待ちとか遅延処理っぽいこと
出来たコードはこんな感じ。

(function(){
  var resizeImage = function(){
    var maxWidth  = 300;
    var maxHeight = 300;
    var elements = document.getElementsByTagName("img");
    for(i=0;i<elements.length;i++){
      var width  = elements[i].width;
      var height = elements[i].height;
      if (width > height) {
        elements[i].width = Math.min(width, maxWidth);
      } else {
        elements[i].height = Math.min(height, maxHeight);
      }
    }
  };
  setTimeout(function(){
    if(!window.jQuery)
        setTimeout(arguments.callee, 10);
    else
        resizeImage();
  }, 10);
})();

参考にしたコードでは関数を外に出していたんですが、
他にどんなコードを書くか解らないので、無名関数の中に格納しました。

処理自体を無名関数にしても良かったんですがsetTimeoutの中が長くなるのは嫌だったので、
そちらは適当な名前を付けました。

サンプル

http://amazon.nplll.com/asin/B000QUIE5W



今回のメモその1 「window.jQuery」

jQueryが読み込まれていない場合undefinedを返すので、
これを利用してjQueryが読み込まれているかどうかをチェックできるようです。


今回のメモその2 「arguments.callee」

自分自身を呼び出すプロパティ
今回の例で言うと、「jQueryが読み込み済みかどうかをチェックして読み込み済みなら処理を行う」と言う部分。

参考

第2回 JavaScriptの関数をマスターしよう - @IT