コメント欄から情報頂きましたのでコメント欄を参照ください
JQuery の ready の実装
DIV でもなんでも ready が実行できて追加要素の描画完了時に実行してくれるのでどういう実装してるのかと思ってソース読んだら setTimeout してた
一部抜粋
if ( document.readyState === "complete" ||
( document.readyState !== "loading" && !document.documentElement.doScroll ) ) {
// Handle it asynchronously to allow scripts the opportunity to delay ready
window.setTimeout( jQuery.ready );
}
動作を推測
- setTimeout を呼び出す
- 描画含む他のタスクに処理が一旦切り替わる
- 描画処理が終わったら処理に戻ってくる
- 結果として描画終了後に処理を続行することになる
という一連の流れのおかげで動的に DIV 等を追加した後に ready すると描画後に実行される
ということっぽい
ready を意識する状況
- 動的にDIV等の要素追加をした後にすぐにサイズを測ると 0 を返してくる時、ready後だと想定通りのサイズが返ってくる
- 動的にDIV等の要素追加をした後にスクロールポジションが想定していない値になっている時、ready後だと想定通りのサイズが返ってくる