jQuery - Chromeのmousemoveでイメージのサイズを変更するにはどうすればよいですか？

Question

mousemoveイベントに依存するイメージのサイズ変更操作をテストするための小さなスクリプト（JavaScript - jQuery）をまとめました。要するに、イメージを一度クリックしてから、カーソルをドラッグしてください。画像はマウスの移動ごとにサイズ変更され、その右下の角がカーソルの周りを「追従」します。

私が遭遇した問題は次のとおりです。カーソルを動かすと直ぐに、サイズ変更がちょっとばかげています。 1~2秒後、非常にスムーズに動く。カーソルを少し動かしてからもう一度移動すると同じ状況が発生します。

この問題はGoogle Chromeでのみ発生すると思われるので、私の最初の考えは、このブラウザのアンチエイリアス機能と関係があることです。しかし、私は専門家ではありません。 イメージがかなり大きい（幅&高さ - 賢明ではなく、 "KB" -wise）である

あなたはここで、この "ミニアプリ" をテストすることができます。http://picselbocs.com/projects/helsinki-map-application/test.php

そして、ベローズのコードです：

<img src="Helsinki.jpg" id="map" style="width: 526px; height:300px; position: absolute; top:0; left:0" /> 

<script> 
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 }); 
    }); 

})(); 
</script> 

誰かがこの問題の解決方法を提供できるのであれば、私は非常に感謝します。

Answer 1

http://asp-net-by-parijat.blogspot.in/2014/09/aspnet-image-magnifying-effect-with.html ！function（$）{ "use strict";

var Magnify = function (element, options) { 
    this.init('magnify', element, options) 
} 
Magnify.prototype = { 
    constructor: Magnify 
    , init: function (type, element, options) { 
     var event = 'mousemove' 
      , eventOut = 'mouseleave'; 

     this.type = type 
     this.$element = $(element) 
     this.options = this.getOptions(options) 
     this.nativeWidth = 0 
     this.nativeHeight = 0 

     if(!this.$element.parent().hasClass('magnify')) { 
      this.$element.wrap('<div class="magnify" \>'); 
      this.$element.parent('.magnify').append('<div class="magnify-large" \>'); 
     }   
     this.$element.siblings(".magnify-large").css("background","url('" + this.$element.attr("src") + "') no-repeat"); 

     this.$element.parent('.magnify').on(event + '.' + this.type, $.proxy(this.check, this)); 
     this.$element.parent('.magnify').on(eventOut + '.' + this.type, $.proxy(this.check, this)); 
    }