jQuery - 如何在 Chrome 中调整 mousemove 上的图像大小？答案

【问题标题】：jQuery - how to resize image on mousemove in Chrome?jQuery - 如何在 Chrome 中调整 mousemove 上的图像大小？
【发布时间】：2012-03-12 07:57:40
【问题描述】：

我编写了一个小脚本（JavaScript - jQuery），用于测试依赖于 mousemove 事件的图像调整大小操作。简而言之，这个想法是单击图像一次，然后拖动光标。每次鼠标移动时，图像都会调整大小，其右下角会“跟随”您的光标。

我遇到的问题是：在您开始移动光标后，调整大小有点生涩。 1-2秒后，运行非常流畅。如果您停止移动光标然后再次移动，也会出现同样的情况。

这个问题似乎只发生在谷歌浏览器中，所以我的第一个想法是它与这个浏览器的抗锯齿功能有关。但我不是专家。图像很大（宽度和高度 - 明智，而不是“KB”）

您可以在这里测试这个“迷你应用”：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>

如果有人能提供这个问题的解决方案，我将不胜感激。

【问题讨论】：

我检查了两台不同的电脑，情况都是一样的。您是否尝试过使用 Chrome 或其他方式？因为它在 Firefox 中运行良好。
我实际上认为您无法解决此问题，因为这可能是一些重绘/重排优化但您可以使用 Google Speed Tracer：code.google.com/webtoolkit/speedtracer 找出是什么那时真的在发生。
你能更好地解释一下是什么问题吗？也许使用截屏软件like this？
@AndreiOniga 我已经检查了 Chrome，一切都很好
谢谢你的想法，m90。我已经安装了 Chrome 的 Speedtracer，发现你是对的。以下是 Speeedtracer 提供的有关这些延迟的信息：（长时间事件：@1.36 秒 - 事件持续时间：852 毫秒。超过阈值：100 毫秒；...；描述：浏览器的渲染引擎更新了屏幕。）。关于如何绕过此功能或通过 javascript 停用它的任何想法（猜想这不太可能）？此图像大小调整实际上是用于地图缩放功能。

标签： javascript jquery image mousemove

【解决方案1】：

http://asp-net-by-parijat.blogspot.in/2014/09/aspnet-image-magnifying-effect-with.html !函数 ($) { “使用严格”；

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

【讨论】：