title: Image Load process issue on javascript
body: <p>Well I am facing very strange problem, see the following scenario.</p>
  
  <p>When page loads it's shows an image and on page load event the following thing happening...</p>
  
  <pre><code>$(function () {
  
      LoadCrop();
  });
  var i = true;
  
  function LoadCrop() {
      debugger;
      if(i == true)
      { 
          i=false;
      }   
      else
      {
          i=true;
      }
  
      $('#&lt;%=imgCrop.ClientID %&gt;').resizable({
          stop: function (event, ui) {
              panelwidth = ui.size.width;
              panelheight = ui.size.height;
              //updateresize(QueryString.idflyer, this.id, panelwidth, panelheight);
              $("#&lt;%=hndResizeWidth.ClientID %&gt;").val(panelwidth);
              $("#&lt;%=hndResizeHeight.ClientID %&gt;").val(panelheight);  
          }
      });
  
      sleep(1);
  
      var initialH = jQuery('#&lt;%=hndInitialHeight.ClientID %&gt;').val();
      var initialW = jQuery('#&lt;%=hndInitialWidth.ClientID %&gt;').val();
  
      if (initialH != '' || initialW != '') {
          jQuery('#&lt;%=imgCrop.ClientID %&gt;').Jcrop({
              onSelect: storeCoords,
              setSelect:   [ 10, 10, Number(initialW) + 10, Number(initialH) + 10 ],
          });
      }
      else {
          jQuery('#&lt;%=imgCrop.ClientID %&gt;').Jcrop({
              onSelect: storeCoords
          });
      }
  }
  </code></pre>
  
  <p>As seen this code is working fine, but when I do other process link rotate image or crop image than image suddenly invisible.</p>
  
  <p>SO, for checking the problem I was trying and suddenly notice that If I put 2 alert boxes than everything is fine. See following code where I just added simply 2 alert boxes.</p>
  
  <pre><code>function LoadCrop() {
      debugger;
      if(i == true)
      {
          alert('1');
          sleep(1000);
          i=false;
      }   
      else
      {
          alert('2');
          sleep(1000);
          i=true;
      }
  
      $('#&lt;%=imgCrop.ClientID %&gt;').resizable({
          stop: function (event, ui) {
              panelwidth = ui.size.width;
              panelheight = ui.size.height;
              //updateresize(QueryString.idflyer, this.id, panelwidth, panelheight);
              $("#&lt;%=hndResizeWidth.ClientID %&gt;").val(panelwidth);
              $("#&lt;%=hndResizeHeight.ClientID %&gt;").val(panelheight);  
          }
      });
  
      sleep(1);
  
      var initialH = jQuery('#&lt;%=hndInitialHeight.ClientID %&gt;').val();
      var initialW = jQuery('#&lt;%=hndInitialWidth.ClientID %&gt;').val();
  
      if (initialH != '' || initialW != '') {
          jQuery('#&lt;%=imgCrop.ClientID %&gt;').Jcrop({
              onSelect: storeCoords,
              setSelect:   [ 10, 10, Number(initialW) + 10, Number(initialH) + 10 ],
          });
      }
      else {
          jQuery('#&lt;%=imgCrop.ClientID %&gt;').Jcrop({
              onSelect: storeCoords
          });
      }
  }
  </code></pre>
  
  <p>It's dificult to get the exact problem and solution...
  :( </p>
  
  <p><strong>EDIT#1</strong></p>
  
  <p>Also I notice that if I remove following code block than it solve the problem.</p>
  
  <pre><code>    $('#&lt;%=imgCrop.ClientID %&gt;').resizable({
          stop: function (event, ui) {
              panelwidth = ui.size.width;
              panelheight = ui.size.height;
              //updateresize(QueryString.idflyer, this.id, panelwidth, panelheight);
              $("#&lt;%=hndResizeWidth.ClientID %&gt;").val(panelwidth);
              $("#&lt;%=hndResizeHeight.ClientID %&gt;").val(panelheight);  
          }
      });
  </code></pre>
  
  <p>Also other thing is that this all control is in user control, and this control is in update panel of .ASPX page, so if I remove it from update panel than also it solve the problem...</p>
  
  <p>May be ajax make it late delay....
  :(</p>