title: jCrop (jQuery) sometimes fails to load image/cropper area
body: <p>I've got a pretty simple problem, but I've become clueless on what is causing the problem. In one of my applications I'm using jCrop as a small add-on to crop images to fit in banners/headers etc. These steps will be taken:</p>
  
  <pre><code>1) Select an image (using CKFinder for this, CKFinder returns the image path to an input field)
  2) Click a button to load the image
  3) Crop the image
  4) Save the image
  </code></pre>
  
  <p>in about 75% of the cases everything goes according to plan, however the in the other 25% of the cases jCrop fails to load the cropping area and leaves it blank. Here's the jQuery code I'm using:</p>
  
  <pre><code>jQuery('#selectimg').live('click', function(e) { 
    e.preventDefault();
    var newsrc = jQuery('#img2').val();
    jQuery('#cropbox').attr('src', newsrc);
    var jcrop_api = jQuery.Jcrop('#cropbox', {
      boxWidth: 700, 
      boxHeight: 700,
      onSelect: updateCoords,
      onChange: updateCoords
    });
    //Some other JS code come's here for buttons (they work all the time)
  });
  </code></pre>
  
  <p>I noticed that when I left the part away where #cropbox is being transformd in a cropable area, that the image is loading just fine, so the mistake lies with the <code>var = jcrop_api</code> part, but I slowsly start to think that there is no solution for this...</p>
  
  <p>This is what I've tried so far:</p>
  
  <p>Making a div <code>&lt;div id="cropper-box"&gt;&lt;/div&gt;</code> and use <code>jQuery('#cropper-box').append('&lt;img src="" id="cropbox" /&gt;');</code> and afterwards set the value. I tried the same thing but setting the image src in 1 step instead of afterwards.</p>
  
  <p>I tried to put a placeholder on the page <code>&lt;img src="placeholder.png" id="cropbox" /&gt;</code> and change the source upon clicking the button. This works, but the cropperarea stays the size of the image (300x180px or something) and doesn't get bigger as it should.</p>
  
  <p>// Edit:</p>
  
  <p>Trying some more showed me that the image source is being replaced properly(! using Firefox to show the source for the selected text), I double checked the URL but this was a correct URL and a working image.</p>
  
  <p>At the place where the cropper should be, there's an about 10x10 pixel white spot where the cropper icon (a plus sign) is popping up.. but as said before: the image isn't shown.</p>
  
  <p>// Edit 2:</p>
  
  <p>So I've took the sources for both the 1st and the 2nd try for the same image. As told before the first try the image won't load properly and the 2nd try it does (only when the 2nd try is the same image(!!)).</p>
  
  <p>The selected page source shows 1 difference which is, first try:</p>
  
  <pre><code>&lt;img style="position: absolute; width: 0px; height: 0px;" src="http://95.142.175.17/uploads/files/Desert.jpg"&gt;
  </code></pre>
  
  <p>second try:</p>
  
  <pre><code>&lt;img style="position: absolute; width: 700px; height: 525px;" src="http://95.142.175.17/uploads/files/Desert.jpg"&gt;
  </code></pre>
  
  <p>I guess this is the image that's being replace by jCrop, but it's a complete riddle why it puts 0 heigth/width in there the first and the proper sizes the second time.</p>