作業をしていてちょっと、引っかかってしまったのでメモです。
jQueryで必ずといって良いほど書く「$(function(){});」についてです。
画像の情報を取得出来ない？
このブログの記事一覧時には各記事の一番最初に使った画像をサムネイルとして使用しています。ページの読み込み時にJSで条件分岐させて画像の大きさを変更して、縦長でも横長でもサムネイルの枠に収まるようにしています。
が。
最初にこれを作ったとき、どうもJSが効いたり効かなかったりとまちまちな処理が起こりました。結果が一定でないので、多分読み込み順序やタイミングかな〜なんて思ったのですが、きちんと「$(function(){});」を書いて全部読み込んでから実行するようにしてるのになんでなのかわかりませんでした。
ググっていろいろ調べてみて驚愕。下記の記事に行き当たりました。
jQuery – $(function(){}); の落とし穴 – 旧・私と私の猫の他は誰でも隠し事を持っている
どうやら $(document).ready(function(){}) の短縮形である $(function(){}); はWebkit系（ChromeやSafari）だと画像のロードが完了する前に処理を実行してしまうらしいです。なぜに…。
解決方法
解決方法は先ほどのサイト様にあるように、「jQuery.event.add(window,”load”,function(){…});」で解決しました。確かに少し処理はもたついてしまいますが…。
今回は自動で画像の情報を全部ちゃんと取得しないとダメだったのでこちらを使用しましたが、htmlさえ読み込めればちゃんと動く時は普段通り「$(function(){});」で大丈夫そうですね。
ちゃんと覚えておいて、使い分けなきゃです。
