画像が含まれる要素の高さをjquery.tile.jsを使って調整する方法

要素の高さを揃える超軽量なjQueryプラグインjquery.tile.jsを公開で公開されている jquery.tile.js
かなり便利なプラグインで、使っている人も多いはず。

テキストだけだったりすると以下のように書くだけでOKですが、画像が絡むとちょっと複雑でした。

$(function() {
	$(".tile-sample1").tile();
	//その他のコード
});

画像が絡むと、画像の読み込みを待って、高さが決まったところから、tile.jsを実行する必要があります。

画像の読み込み前にtile.jsを実行してしまうと、画像を読み込んで高さが変わってしまいます。

ということで、前述のコードをちょっと変更します。

$(window).load(function() {
	$(".tile-sample1").tile();
});
$(function() {
	//その他のコード
});

$(window).load()がポイントです。
$(window).load()にすることで、全ての画像読み込みを待ってから実行してくれるようになります。

訂正

$(window).load()のところが、当初$(window).ready()になっていました。ご指摘ありがとうございます。

“画像が含まれる要素の高さをjquery.tile.jsを使って調整する方法” への5件のフィードバック

  1. […] 改善についてはこちらの「画像が含まれる要素の高さをjquery.tile.jsを使って調整する方法」を参考にさせていただきました。ありがとうございます。 This entry was posted in Jquery, コーディ […]

  2. […] 改善についてはこちらの「画像が含まれる要素の高さをjquery.tile.jsを使って調整する方法」を参考にさせていただきました。ありがとうございます。 This entry was posted in jQuery and tagged jQ […]

  3. […] 改善についてはこちらの「画像が含まれる要素の高さをjquery.tile.jsを使って調整する方法」を参考にさせていただきました。ありがとうございます。 […]

  4. […] 作者の要素の高さを揃える超軽量なjQueryプラグインjquery.tile.jsを公開を拝見すれば簡単に利用できます、ショップの場合には画像が含まれる要素の高さをjquery.tile.jsを使って調整する方法も参考になります。 […]

  5. […] 画像が含まれる要素の高さをjquery.tile.jsを使って調整する方法 […]