futuremix

WordPress 2 以降ではアップロードした画像の記事への挿入も AJAX を使ってかなり便利になっています。しかし img 要素に画像の幅と高さが自動で入らないので、入るようにしてみました。これでブラウザが画像を読み込んでからレイアウトを再計算しなくて良くなるので、表示速度が若干拘束されるはずです。

試したのは WordPress ME 2.2.3 です。修正するのは wp-admin/upload.js ファイルです。修正箇所が多いのでファイルごと入れ替えてください。IE7 と Firefox 2 で動作確認しています。

以下、修正の考え方を説明します。読まなくても使えます。

239 行目付近の部分で img 要素の文字列を作っている箇所があります。ここで width と height が指定すれば良さそうです。しかし、this.currentImage.width と this.currentImage.height はサムネイル画像の、しかもサイズが合っていない値になります。

そこで、JavaScript の Image オブジェクトを使ってサムネイル画像またはフルサイズ画像を取得して、width と height を取得することにしました。しかし、Image オブジェクトは生成して src を指定してからすぐに width と height を参照しても 0 が返ってくるだけです。画像がまだ読み込まれていないからです。(キャッシュにある場合は値が返ってくる。)

そこで、Image オブジェクトの complete が true になるまで待てばよいのですが、JavaScript の宿命で wait や sleep に相当するものがありませんので、setTimeout ないし setInterval 関数を使って、ロジック部分を別関数化して呼び出す必要があります。これに伴い変数もグローバル変数にする必要がありました。

さらに何らかの理由で画像が取得できなかった場合でも無限待ち（ループ）に陥らないように制限もかける必要があり、大幅な変更になりました。