中途半端を極める

web関連で役に立ちそうなものを紹介いたします

javascript

[javascript]複数の要素の高さを揃えるjavascript利用時にうまく動作しない時の対処法

投稿日:

「EqualHeight」や「flatheights」など複数の要素の高さを揃えるjavascriptを使用すると、SafariとGoogle Chromeではうまく動作しない場合があります。
うまく動作しない場合の対処方法をメモしますので、気になる方はご覧ください。

jQuery.event.add(window,"load",function(){
    //実行式
};

分析されている方がいました。

・$(function(){}) は、$(document).ready(function(){}) の短縮形であり、DOMContentLoaded という DOM 構築完了イベントへのハンドラ記述法である。
・WebKit系ブラウザでは DOMContentLoaded 発火の時点で画像のロードが完了しておらず、img タグに width や height 属性を明示しない限り画像のロードが完了するまで幅や高さ等が JavaScript で取得できない。
・したがって画像を含むブロック内部の高さも算出することができず、画像抜きの高さとなってしまう。
・これを回避するには DOMContentLoaded イベントではなく、画像のロードが全て完了した後で発火される window.onload を用いる。

引用元:jQuery – $(function(){}); の落とし穴
http://d.hatena.ne.jp/Mariyudu/20111020/1319121759

以下にデモページを作っております。
http://fjri.webcrow.jp/javascript/load/

-javascript

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

【Javascript】でphpのincludeやrequireのような動作をJavascriptで実現する方法

サブカラムやフッターなど他のページで使いまわすような要素はincludeやrequire、SSIなどで外部ファイルを読み込んで対応している人は多いかと思われます。実際そっちの方が更新も楽ですし、ケアレ …

【Javascript】IE6でもpng画像を使えるようにする

IE6でpng画像を使うと、透明部分が灰色になって正常に表示されません。 IE6でも正常に表示させるためには「DD_belatedPNG」というライブラリを利用します。 img要素やCSSでの背景(背 …

【javascript】高さをjQueryで取得する時Google Chrome、Safariでうまく動作しない時の対処方

jQueryで高さ(height)を取得する時、IEやFirefoxではうまく動作するけど、Google Chrome、Safariで動作しなくて困ったことは無いでしょうか?高さを調整するようなjav …

【javascript】チェックボックスをチェックしないとサブミットできないボタン

個人的には結構使用する動作なので紹介いたします。 プライバシーポリシーや20歳以上の確認を行うときなどに有効ですね。 残念ながらフォームのスパム対策としてはおそらく効果は無いと思われます。

【javascript】レスポンシブデザインにも使用できる!マウスオーバーするとメインの画像が切り替わるjQuery「ImageNavigation」

今回はマウスオーバするとメインの画像が切り替わるjavascriptを紹介いたします。 FLASHなどではこのような動きをするものはあるのですが、jQueryではなかなかありそうでない動きですので、重 …