jquery 1.7.1 と jquery-mobile 1.1.0 を使用しています。また、iPhone (および iPad) デバイス用です - Mac OS X で xCode を使用してテスト済みです。
MULTI ページ テンプレート(シンプル ページではない) があります。
<div data-role="page" id="page-start">
<img src="src/images/header-img.png" style="max-width:100%;" />
<div data-role="content">
<p>
Welcome to the test page<br/>
now some test input fields:
</p>
<div data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value=""/>
</div>
<div data-role="fieldcontain">
<label for="name2">Text Input:</label>
<input type="text" name="name2" id="name2" value=""/>
</div>
</div>
</div>
今私の問題は、ページはすでに表示されていますが、画像（元の幅：770px）が2〜3秒遅れて表示されることです。「max-width」または単純な「width」スタイル属性がない場合は、直接表示されます (ただし、幅は 770px です)。
ページが表示されたときに画像が既に読み込まれていることを解決するにはどうすればよいですか?
私が試したのは、「#page-start」(最初は style="display:none" を使用) を非表示にして、javascript で実行することです。
$(document).bind('pageinit', function() {
$("#page-start").show();
});
しかし、それは私の問題を解決しませんでした。ページが直接表示され、画像が表示されるまで2,3,4秒かかり、ページが少し下にジャンプします(正確には画像の高さ)。