javascript - div 内の画像を更新する

Question

ユーザーのプロフィール写真を保持するために div を使用しています。それを更新するには、ユーザーは新しい画像を選択し、それによって div 内の古い画像が置き換えられます。次に、ユーザーは更新を押して新しい画像をアップロードしますが、サーバーから応答を受け取り、同じ div を持つ同じページが読み込まれると、div に古い画像が入力されます。これをデバッガでトレースしました。div が画像で更新される前の行で停止し、ファイルシステムで確認します (正しい新しい画像がそこにあります)。その後、デバッガーに進み、古い画像で div を埋めます。1 ～ 2 秒後にページを更新すると、新しい画像が表示されます。

div ピクチャ コンテナ:

<div id="ProfilePictureBox"></div>

この関数は、ページがロードされて div が更新されるときに呼び出されます

function preloadForm() {
    var url = '/FeatureServer/Authentication?action=getMyDetails&userName=' + userName;
    var req = $jQuery.ajax({
        url: url,
        type: 'GET',
        success: function (data, response, xhr) {
            var pic = data['ProfilePicture'];
            if (pic.length > 0) {
                pic = '/FeatureServer/' + pic;
                // pausing here and checking `pic` in the browser confirms its the correct image
                $jQuery("#ProfilePictureBox").css("background-image", 'url(' + pic + ')');
                // old image is loaded ^
            }
        }
    });
}