jquery - JavaScript での画像読み込み処理の問題

Question

さて、私は非常に奇妙な問題に直面しています。次のシナリオを参照してください。

ページが読み込まれると、画像が表示され、ページ読み込みイベントで次のことが起こります...

$(function () {

    LoadCrop();
});
var i = true;

function LoadCrop() {
    debugger;
    if(i == true)
    { 
        i=false;
    }   
    else
    {
        i=true;
    }

    $('#<%=imgCrop.ClientID %>').resizable({
        stop: function (event, ui) {
            panelwidth = ui.size.width;
            panelheight = ui.size.height;
            //updateresize(QueryString.idflyer, this.id, panelwidth, panelheight);
            $("#<%=hndResizeWidth.ClientID %>").val(panelwidth);
            $("#<%=hndResizeHeight.ClientID %>").val(panelheight);  
        }
    });

    sleep(1);

    var initialH = jQuery('#<%=hndInitialHeight.ClientID %>').val();
    var initialW = jQuery('#<%=hndInitialWidth.ClientID %>').val();

    if (initialH != '' || initialW != '') {
        jQuery('#<%=imgCrop.ClientID %>').Jcrop({
            onSelect: storeCoords,
            setSelect:   [ 10, 10, Number(initialW) + 10, Number(initialH) + 10 ],
        });
    }
    else {
        jQuery('#<%=imgCrop.ClientID %>').Jcrop({
            onSelect: storeCoords
        });
    }
}

ご覧のとおり、このコードは正常に動作していますが、他のプロセスリンクを実行すると、画像が突然見えなくなるよりも画像を回転させたり、画像をトリミングしたりします。

SO、私が試していた問題を確認するために、突然、2つのアラートボックスを配置すると、すべてがうまくいくことに気付きました。単純に 2 つのアラート ボックスを追加した次のコードを参照してください。

function LoadCrop() {
    debugger;
    if(i == true)
    {
        alert('1');
        sleep(1000);
        i=false;
    }   
    else
    {
        alert('2');
        sleep(1000);
        i=true;
    }

    $('#<%=imgCrop.ClientID %>').resizable({
        stop: function (event, ui) {
            panelwidth = ui.size.width;
            panelheight = ui.size.height;
            //updateresize(QueryString.idflyer, this.id, panelwidth, panelheight);
            $("#<%=hndResizeWidth.ClientID %>").val(panelwidth);
            $("#<%=hndResizeHeight.ClientID %>").val(panelheight);  
        }
    });

    sleep(1);

    var initialH = jQuery('#<%=hndInitialHeight.ClientID %>').val();
    var initialW = jQuery('#<%=hndInitialWidth.ClientID %>').val();

    if (initialH != '' || initialW != '') {
        jQuery('#<%=imgCrop.ClientID %>').Jcrop({
            onSelect: storeCoords,
            setSelect:   [ 10, 10, Number(initialW) + 10, Number(initialH) + 10 ],
        });
    }
    else {
        jQuery('#<%=imgCrop.ClientID %>').Jcrop({
            onSelect: storeCoords
        });
    }
}

正確な問題と解決策を見つけるのは難しい... :(

編集＃1

また、次のコード ブロックを削除すると問題が解決することにも気付きました。

    $('#<%=imgCrop.ClientID %>').resizable({
        stop: function (event, ui) {
            panelwidth = ui.size.width;
            panelheight = ui.size.height;
            //updateresize(QueryString.idflyer, this.id, panelwidth, panelheight);
            $("#<%=hndResizeWidth.ClientID %>").val(panelwidth);
            $("#<%=hndResizeHeight.ClientID %>").val(panelheight);  
        }
    });

また、このすべてのコントロールはユーザーコントロールにあり、このコントロールは.ASPXページの更新パネルにあるため、更新パネルから削除すると問題が解決します...

ajaxが遅延を遅らせる可能性があります.... :(