JavaScriptで、imgタグのwidthとオリジナルの画像のwidthを簡単に取得する方法

JavaScriptでフツウに画像サイズを取得する場合

<img src=”https://gendosu.jp/wp-content/themes/twentyten/images/headers/cherryblossoms.jpg” width=”470″ height=”99″ id=”image”>

といった感じですが、オリジナルの画像サイズは940×198なので、そのサイズがとりたい。

という場合ですが

という感じで取得出来ます。

いまさらながら、古いJQuery(1.8以前)で$.browser.msieとかやっていた人に贈る

1.8以前のJQueryでは$.browser.msieという判定でIEとそれ以外の処理を分けていたりしました。

これがJQuery1.9以降は出来なくなります。

ということで、JQuery1.9以降でこのような判定に近い事が出来るかどうかを考えてみます。

まず、JQuery1.9では、browserが削除されます。

それにかわって、supportを使えという感じに書かれています。

このsupportというのは、ブラウザ毎に分けるのでは無く、ブラウザが対応している機能ごと、実装ごとに判定しようというメソッドのようです。

たとえば、$.support.opacityは、opacityによる透明度を指定する機能を実装しているブラウザであればtrueが返ってきます。

このsupportの判定機能を組み合わせて、MSIEであるかを判定してみます。

おおよそ、MSIEを区別する必要性がある場合、IE6IE7IE8を対象にすると思うので

この場合を想定します。

このIE6IE7IE8は、opacityが実装されていないので、この値で判定します。

と言う判定は

で代用可能かと思われます。

ページで画像を延滞ロードさせる

画像が多いサイトなどで、ローディング時間が長くて困る、なんて言う時は

画像の延滞ロードです。

最近のAmazonとか、スクロールして画像が表示される時に一瞬ローディング画像が出たりしてるやつです。

http://www.appelsiini.net/projects/lazyload

このプラグインを使うと、簡単に実現出来ます。

必要な物は、jQuaryとこのプラグイン。

あとは、延滞ロードしたい画像のタグにclass=”lazy”を追加します。
[javascript]$(“img.lazy”).lazyload();[/javascript]
という処理をどこかに置きます。

以上です。