javascript - ウィンドウの幅に応じたサイズの画像を作成します。DOM に挿入すると画像が描画されない

Question

私は phonegap アプリ (jquery モバイルを使用) を構築しており、window.outerWidth と高さ auto に相対的な幅で DOM に画像を挿入しようとしています。

私はすでに次のように相対的な幅で画像をdivに配置しようとしました:

<div style="width:myRelativeWidth">
    <img style"width:100%; height:100%" src="somePath>
</div>

これは、画像の高さ (自動) の設定が遅すぎる iPhone を除いて、うまく機能します。正しい幅になりますが、正しい縦横比にサイズ変更される前に、高さ方向に元のサイズに引き伸ばされます。

これに対抗するために、元の画像のサイズに合わせて拡大しようとしました。これを取得する唯一の方法は、次の関数によって DOM に挿入される前に、画像をプリロードしてサイズを設定することです。

imageElement = new Image();
imageElement.src = path;

setImageSize(widthPercentage);

function setImageSize(widthPercentage) { 
    var pageWidth = window.outerWidth;
    var pageHeight = window.outerHeight;
    var imageWidth = imageElement.width;
    var imageHeight = imageElement.height;
    var calculatedImageWidth;
    var calculatedImageHeight;
    var scaleFactor;

    if(widthPercentage) {
        calculatedImageWidth = pageWidth * (widthPercentage / 100);
        scaleFactor = calculatedImageWidth / imageWidth;
        calculatedImageHeight = imageHeight * scaleFactor;
        imageElement.width = calculatedImageWidth;
        imageElement.height = calculatedImageHeight;
    }
}

document.body.appendChild(imageElement);

しかし、ブラウザでテストすると、ページをロードするときに画像が表示されませんが、更新すると表示されます。いくつかのグーグルは、キャッシュにロードされているが描画されていない画像に問題があることを教えてくれました。

画像を強制的に描画するにはどうすればよいですか?