【メモ】 画像サイズ読み込みの遅延処理

前回のエントリはこちら。

【メモ】 jQueryライブラリ読み込みの遅延処理 – nplll

前回のエントリでは、jQueryライブラリの読み込みを待って、画像の縮小表示を行うということをしたのだけど、
それでもまだ上手く縮小できないことがあって調査を進めた結果、

  1. 画像の読み込みが追いつかないことがある
  2. 画像を読み込んでいるのに画像の高さの取得に失敗することがある
    • なぜか取得できる高さは「13」

という事象が起こりうることが分かりました。
「なんで?」かはしらん(苦笑)

とりあえず対策を盛り込みたいと思います。



再対策後のコード

$(window).load(function() {
var e = $('#amazonItemThumbnailImage')[0];
var resizeImage = function(){
var max = 300;
var w   = e.width;
var h   = e.height;
if (w >= h && w > max) {
e.width = Math.min(w, max);
} else if(h > w && h > max) {
e.height = Math.min(h, max);
}
};
setTimeout(function(){
if (e.width < 15 || e.height < 15)
setTimeout(arguments.callee, 10);
resizeImage();
}, 10);
});

まず、画像を含めた全てが読み込み終わっているかどうかをチェック。
結局、window.jQueryをチェックせずページ要素全体について検証した方が確実でした。
その上で、幅・高さについてチェックして大丈夫なときだけ処理。


なお処理をシンプルにするために画面内の画像全てに適用するのを止め、
特定の画像に対してのみ処理を行うように変更しました。



これで大丈夫かな…



追記: 11:24

jQueryについては、$(window).load();処理で遅延が問題なくなったので、
タイトルを「画像サイズの読み込み遅延」に変更しました。