jquery - プリロードしてモーダルに変数を表示

Question

クリックで取得してロードする画像が供給されるMODALをロードしています。ダイアログが適切に中央に配置されるように、クリック時に画像をロードして表示する方法を誰かが説明してください。現状では、ダイアログは画像サイズを認識していないため、中心からずれてロードされています。.load 関数を使用してみましたが、どこに配置すればよいかわかりません。エラーが発生したためです。以下のコードは完全に機能しますが、サイズを認識できるように、ダイアログにフィードする前に desIMG をプリロードする必要があります。

function thumbNailModal() {
    $('.thumb').click(function() {
        picDES = document.getElementById(this.id).getAttribute('id');
        var desIMG = $('<img/>', {
                        "class":"inline",
                        src: '/images/design/full/' + picDES
                    });
        $(desIMG).dialog(
            {
                modal:      true,
                draggable:  false,
                title:      'Designs',
                height:     'auto',
                width:      'auto',
                open:       function(){
                    jQuery('.ui-widget-overlay').bind('click',function(){
                        jQuery(desIMG).dialog('close');
                    })
                }
            }
        );
        $(".ui-dialog-titlebar").hide();
    });
}

編集

 function thumbNailModal() {
        $('.thumb').click(function() {
.load(
            picDES = document.getElementById(this.id).getAttribute('id');
            var desIMG = $('<img/>', {
                            "class":"inline",
                            src: '/images/design/full/' + picDES
                        });
)

もっとそういうのが欲しい。クリックするとロードされます。ページをロードするとすぐにすべての画像をプリロードするだけではありません。