質問: "error") { console.log("Error loading image " + imageUrl); } else { jQuery(tObj).attr('src', imageUrl); //document.body.appendChild(img); } }, {maxWidth: 600} ); } ``` ``` ``` 上記のような単純な処理で、 とりあえず対象の画像URLをfunction内に取り込めてるか console.log()で確認すると正常に表示されたのですが、 その後、「loadImage(~~);」を追記したところ、console.logが無限に繰り返されてブラウザがハングアップしてしまいました 何が原因でしょうか ご意見ご回答よろしくお願いします
回答: `img`要素の`onload`イベントハンドラ内で`src`プロパティを弄っていれば, そりゃイベントループに陥ります. 無限ループの原理 * 画像を読み込む * 画像の読み込みが完了し`load`イベントが発生する * `onload`イベントハンドラが呼び出され, `fix_photo`関数が呼び出される. * `loadImage`メソッドに渡しているコールバック関数内で`jQuery(tObj).attr('src', imageUrl)`を実行しているので, もとの`img`要素の`src`プロパティが書き換わる * 一番上に戻る ``` function fix_photo(imageUrl, tObj){ console.log(imageUrl); //以下のloadImage()処理が有効だと、なぜかループ処理される loadImage( imageUrl, function (img) { if(img.type === "error") { console.log("Error loading image " + imageUrl); } else { jQuery(tObj).attr('src', imageUrl);//←ここでsrcをいじっているのでfix_photoが何度も呼び出される! //document.body.appendChild(img); } }, {maxWidth: 600} ); } ``` で, どうすればこの問題を解決できるかというと, 上のループを断ち切れば良いのです. つまり, `onload`イベントハンドラを無効化すれば処理は止まります. ``` function fix_photo(imageUrl, tObj){ console.log(imageUrl); //以下のloadImage()処理が有効だと、なぜかループ処理される loadImage( imageUrl, function (img) { if(img.type === "error") { console.log("Error loading image " + imageUrl); } else { tObj.removeAttribute("onload");//これでsrcを弄っても問題なくなった jQuery(tObj).attr('src', imageUrl); //document.body.appendChild(img); } }, {maxWidth: 600} ); } ``` NOTE: ざっと見, `onload`イベントを使っている意味がわからないので, もう少しコードを整理した方が良さそうです.