title: jQuery - how to resize image on mousemove in Chrome?
body: <p>I've put together a small script (JavaScript - jQuery) for testing an image resize operation that is dependent on the <em>mousemove</em> event. In short, the idea is to click on the image once and then drag the cursor around. The image resizes at every mouse move, its bottom-right corner "following" your cursor around.</p>
  
  <p>The problem I've encountered is this:  right after you start moving the cursor around, the resize works a bit jerky. After 1-2 seconds, it runs very smoothly. The same situation occurs if you stop moving the cursor around for a bit and then move it again.</p>
  
  <p>This issue appears to happen only in Google Chrome, so my first thought is that it has something to do with this browser's anti-aliasing feature. But I'm not an expert.
  The image is quite big (width&amp;height - wise, not "KB"-wise)</p>
  
  <p>You can test this "mini-app" here: <a href="http://picselbocs.com/projects/helsinki-map-application/test.php" rel="nofollow">http://picselbocs.com/projects/helsinki-map-application/test.php</a></p>
  
  <p>And bellow is the code:</p>
  
  <pre><code>&lt;img src="Helsinki.jpg" id="map" style="width: 526px; height:300px; position: absolute; top:0; left:0" /&gt;
  
  &lt;script&gt;
  var drag = false;
  (function(){  
  
      $('#map').on('click',function(){
          drag = true;
      });
  
      $(document).on('mousemove',function(e){
          if (drag)
              $('#map').css({ 'height': e.pageY, 'width': e.pageX });
      }); 
  
  })();
  &lt;/script&gt;
  </code></pre>
  
  <p>If anyone can provide a solution to this problem I would greatly appreciate it.</p>