jQueryで画像の幅や高さの取得が不安定な場合は、ページ読み込み実行処理の書き方に注意！

jQueryを使った画像の幅と高さの取得について、なんども同じことをやってしまっているので解決策をココにメモしておきます。

結論からいうと、jQuery使用時に画像の幅や高さの取得が不安定になってしまうのは、「ページ読み込み実行処理」に以下コードのいずれかの書き方をしているのが原因です。

$(function(){
    //処理 
});

$(document).ready(function() {
　　//処理 
});

jQuery(function() {
　　//処理 
});

jQuery(document).ready(function(){
　　//処理 
});

document.addEventListener('DOMContentLoaded', function(){
　　//処理 
}, false);

これらの書き方での実行タイミングは「DOMツリーの構築が完了したら実行」であり、実はこの段階ではまだ画像や動画の準備は終わっていないのです。あくまでDOMの準備ができただけなのですね。

なので、これらの処理を以下のいずれかに書き換えるとうまくいきます。

$(window).on('load',function(){
    //処理
});

$(window).load(function(){
    //処理
});

window.onload = function(){
    //処理
}

loadは画像や動画などの「データの読み込みがすべて完了したら実行する」という実行タイミングになるので、こちらを使えば問題なく画像の幅や高さを不安定にならずに取得することができます。

画像サイズの取得でお悩みの方はぜひお試しになってみてください。