$(function(){ // 処理 });
jqueryでコードを書く際によく見る記述ですが、この記述の場合にはhtml(document)の読み込みが完了した時点で処理が実行されます。
つまり、画像などの読み込みは非同期で行われる為、ページ内の画像(等)が全て読み込まれた後になんらかの処理を行いたい場合には先に処理が実行されてしまい想定通りの挙動になりません。
$(document).ready(function(){ // 処理 });
この記述も同様で、documentの読み込み完了がトリガーになります。
画像などの全てのリソースのロードが終わった後に処理を実行させる為には $(window).load を使用します。
$(window).load(function () { // 処理 });
全ての画像の読み込みを待って処理を行う事は決して多いケースではないとおもいますが、何かの参考になればと。