entityMap|blocks|key|f84gv|text|如果绝对(x，y)位置不是那么重要(意思是:可以省略一些像素值而不破坏您的逻辑)，您可以尝试跳过mousemove-event的一些帧。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|6681c|var+globalSkipCounter+=+0;
var+globalSkipRate+=+5;
$(".imgWrap").mousemove(function(e){
+++if(globalSkipCounter+>=+globalSkipRate){
+++++var+mouseX+=+e.pageX;
+++++var+mouseY+=+e.pageY;
+++++do_stuff(mouseX,+mouseY);
+++++globalSkipCounter+=+0;
+++}
+++else{
+++++globalSkipCounter%2B=1;
+++}
});|code-block|syntax|javascript|3icob|这样，您就可以省略在每个mousemove事件上重新绘制图像，而不是使用您的绘图例程(do_stuff)仅调用一次，每5个事件调用一次。|offset|length|style|CODE^0|0|0|17|8^^$0|$]|1|@$2|3|4|5|6|7|8|N|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|O|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|P|9|@$J|Q|K|R|L|M]]|A|@]|B|$]]]]

If the absolute (x, y) position is not so important (meaning: some pixel-values can be omitted without destroying your logic), you could try to skip some frames of your mousemove-event.

<pre><code>var globalSkipCounter = 0;
var globalSkipRate = 5;
$(".imgWrap").mousemove(function(e){
 if(globalSkipCounter &gt;= globalSkipRate){
 var mouseX = e.pageX;
 var mouseY = e.pageY;
 do_stuff(mouseX, mouseY);
 globalSkipCounter = 0;
 }
 else{
 globalSkipCounter+=1;
 }
});
</code></pre>

This way, you omit redrawing your image on every mousemove-event, instead your draw-routines (<code>do_stuff</code>) are only invoked, once every 5 events.

entityMap|blocks|key|5jlf7|text|使用e.offsetX和e.offsetY或(推荐)e.clientX和e.clientY而不是pageX和pageY。也许这将是一个更好的解决方案。注意：offsetx和offsety据我所知，我不能在Firefox中工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data^0|2|9|C|9|Q|9|10|9|26|7|2E|7^^$0|$]|1|@$2|3|4|5|6|7|8|G|9|@$A|H|B|I|C|D]|$A|J|B|K|C|D]|$A|L|B|M|C|D]|$A|N|B|O|C|D]|$A|P|B|Q|C|D]|$A|R|B|S|C|D]]|E|@]|F|$]]]]

Use <code>e.offsetX</code> and <code>e.offsetY</code> or (recommended) <code>e.clientX</code> and <code>e.clientY</code> instead of pageX and pageY. Maybe this will be a better solution. Note: <code>offsetx</code> and <code>offsety</code> do not work in Firefox as far as I know.

entityMap|blocks|key|fgbtg|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|a2jsv|jQuery(document).ready(function(){
+++++$(".imgWrap").mousemove(function(e){
+++++e.stopPropagation();

+++++mouseX+=+e.pageX;
+++++mouseY+=+e.pageY;
++++});+
})|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

Try this:

<pre><code>jQuery(document).ready(function(){
 $(".imgWrap").mousemove(function(e){
 e.stopPropagation();

 mouseX = e.pageX;
 mouseY = e.pageY;
 }); 
})
</code></pre>

entityMap|0|type|LINK|mutability|MUTABLE|data|url|http://codepen.io/teodragovic/pen/WbPger|1|http://davidwalsh.name/translate3d|2|http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/|3|https://css-tricks.com/using-requestanimationframe/|blocks|key|7hb3q|text|在使用mousemove事件时，有几种方法可以提高性能。|unstyled|depth|inlineStyleRanges|entityRanges|dbq22|使用backface-visibility:+hidden在popover元素上强制硬件加速。同样的事情也可以用来实现transform:+translate3d(0,0,0)但是这使得使用CSS变得很困难。transform函数(参见第2点)。|ordered-list-item|offset|length|style|CODE|b3d54|使用CSStransform函数用于绝对定位，以避免重绘，但保持弹出元素的绝对或固定位置。|20jr0|当通过JS设置内联CSS时，使用requestAnimationFrame来避免不必要的布局垃圾。|9l9ek|(可能，可选)在悬停时隐藏光标，并使用popover元素作为位置指示器。|28kr7|把你能做的一切从JS迁移到CSS+ie。:hover状态可用于切换弹出元素的显示。|cq36d|我做了一个演示示例，结合了所有列出的内容。在光标位置和弹出图像之间仍然有一些延迟，并且原始问题中没有示例链接，所以我无法与其进行比较，但我希望有人会发现这一点很有用。|8v3k0|DEMO|a8hnp|.imgHover+{+
++++display:+none;
++++backface-visibility:+hidden;
++++position:+fixed;
++++top:+0;+left:+0;
++++pointer-events:+none;
}

.imgHolder:hover+~+.imgHover+{+display:+block;+}

//+uncomment+if+it+makes+sense
//.imgHolder:hover+{+cursor:+none;+}|code-block|syntax|javascript|1bmf7|var+posX,+posY;

$('#imgHolder').mousemove(HoverImg);

function+HoverImg(e)+{
++++posX+=+e.pageX;
++++posY+=+e.pageY;
++++window.requestAnimationFrame(showBigImg);++
}

function+showBigImg()+{
++++$('#bigImgHolder').css({'-webkit-transform':+'translateX('+%2B+posX+%2B+'px)+translateY('+%2B+posY+%2B+'px)',+'transform':+'translateX('+%2B+posX+%2B+'px)+translateY('+%2B+posY+%2B+'px)'+});
}|bhk4q|参考文献：|8v9v4|unordered-list-item|aqcm0|4aq6r^0|0|2|R|1N|T|2W|9|0|5|9|0|0|0|K|6|0|0|0|4|0|0|0|0|0|0|Y|1|0|0|2N|2|0|0|1F|3^^$0|$1|$2|3|4|5|6|$7|8]]|9|$2|3|4|5|6|$7|A]]|B|$2|3|4|5|6|$7|C]]|D|$2|3|4|5|6|$7|E]]]|F|@$G|H|I|J|2|K|L|1K|M|@]|N|@]|6|$]]|$G|O|I|P|2|Q|L|1L|M|@$R|1M|S|1N|T|U]|$R|1O|S|1P|T|U]|$R|1Q|S|1R|T|U]]|N|@]|6|$]]|$G|V|I|W|2|Q|L|1S|M|@$R|1T|S|1U|T|U]]|N|@]|6|$]]|$G|X|I|Y|2|Q|L|1V|M|@]|N|@]|6|$]]|$G|Z|I|10|2|Q|L|1W|M|@]|N|@]|6|$]]|$G|11|I|12|2|Q|L|1X|M|@$R|1Y|S|1Z|T|U]]|N|@]|6|$]]|$G|13|I|14|2|K|L|20|M|@]|N|@]|6|$]]|$G|15|I|16|2|K|L|21|M|@]|N|@$R|22|S|23|G|24]]|6|$]]|$G|17|I|18|2|19|L|25|M|@]|N|@]|6|$1A|1B]]|$G|1C|I|1D|2|19|L|26|M|@]|N|@]|6|$1A|1B]]|$G|1E|I|1F|2|K|L|27|M|@]|N|@]|6|$]]|$G|1G|I|A|2|1H|L|28|M|@]|N|@$R|29|S|2A|G|2B]]|6|$]]|$G|1I|I|C|2|1H|L|2C|M|@]|N|@$R|2D|S|2E|G|2F]]|6|$]]|$G|1J|I|E|2|1H|L|2G|M|@]|N|@$R|2H|S|2I|G|2J]]|6|$]]]]

There are several ways to improve performance when using mousemove events.

<ol>
<li>Use <code>backface-visibility: hidden</code> on popover element to force hardware acceleration. Same thing can be achived with <code>transform: translate3d(0,0,0)</code> but that makes difficult to use CSS <code>transform</code> function (see point #2).</li>
<li>Use CSS <code>transform</code> function for absolute positioning to avoid repaints but keep popover element absolute or fixed positioned.</li>
<li>When setting inline CSS via JS use requestAnimationFrame to avoid unnecesary layout trashing.</li>
<li>(maybe, optionally) hide cursor when hovering and use popover element as position indicator.</li>
<li>Move everything you can from JS to CSS ie. <code>:hover</code> state can be used to toggle display of popover element.</li>
</ol>

I made demo example combining all things listed. There is still some latency between cursor position and popover image and none of example links in original question work so I can't compare against it but I hope someone finds this useful.

<a href="http://codepen.io/teodragovic/pen/WbPger" rel="noreferrer">DEMO</a>

<pre><code>&lt;div id="imgHolder" class="imgHolder"&gt;
 &lt;img src="//placehold.it/200x200" alt="" /&gt;
&lt;/div&gt;

&lt;div id="bigImgHolder" class="imgHover"&gt;
 &lt;img src="//placehold.it/500x500" alt="" /&gt;
&lt;/div&gt;
</code></pre>

&nbsp;

<pre><code>.imgHover { 
 display: none;
 backface-visibility: hidden;
 position: fixed;
 top: 0; left: 0;
 pointer-events: none;
}

.imgHolder:hover ~ .imgHover { display: block; }

// uncomment if it makes sense
//.imgHolder:hover { cursor: none; }
</code></pre>

&nbsp;

<pre><code>var posX, posY;

$('#imgHolder').mousemove(HoverImg);

function HoverImg(e) {
 posX = e.pageX;
 posY = e.pageY;
 window.requestAnimationFrame(showBigImg); 
}

function showBigImg() {
 $('#bigImgHolder').css({'-webkit-transform': 'translateX(' + posX + 'px) translateY(' + posY + 'px)', 'transform': 'translateX(' + posX + 'px) translateY(' + posY + 'px)' });
}
</code></pre>

references:

<ul>
<li><a href="http://davidwalsh.name/translate3d" rel="noreferrer">http://davidwalsh.name/translate3d</a></li>
<li><a href="http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/" rel="noreferrer">http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/</a></li>
<li><a href="https://css-tricks.com/using-requestanimationframe/" rel="noreferrer">https://css-tricks.com/using-requestanimationframe/</a></li>
</ul>

entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://developer.mozilla.org/en-US/docs/Web/CSS/will-change|blocks|key|dfiag|text|缓存位置并将更新包装在if(oldpos+!==+newpos)键入check+(记住更新其中的oldpos+)。|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|564cq|使用requestAnimationFrame来处理更新-如果你有一个普通的函数，并将其作为回调传递，那么它将在每一帧中只被调用一次(即，不要使用匿名函数)。|etro9|最后利用transform:translate(x,y)为了设置位置和更好地利用GPU等。与此相关，使用css也没有什么坏处will-change关键字。|UNDERLINE^0|B|L|0|2|L|0|4|O|1Q|B|1Q|B|1Q|B|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|R|G|@$H|S|I|T|J|K]]|L|@]|6|$]]|$A|M|C|N|2|E|F|U|G|@$H|V|I|W|J|K]]|L|@]|6|$]]|$A|O|C|P|2|E|F|X|G|@$H|Y|I|Z|J|K]|$H|10|I|11|J|K]|$H|12|I|13|J|Q]]|L|@$H|14|I|15|A|16]]|6|$]]]]

Cache the position and wrap the update in an <code>if(oldpos !== newpos)</code> type check (remembering to update oldpos inside it).

Use <code>requestAnimationFrame</code> to handle the update - if you have a normal function and pass that as the callback then it will only get called once per frame (ie, don't use an anonymous function).

Finally make use of <code>transform:translate(x,y)</code> to set the position and make better use of the GPU etc. Related to this, there's no harm in making use of the css <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/will-change" rel="nofollow"><code>will-change</code></a> keyword if you want to use top/left instead.

entityMap|blocks|key|doisc|text|尝试基于每秒最大事件数的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|colcn|jQuery(document).ready(function(){
+++var+now,+then,+delta,+interval+=+1000/60;+//maximum+60+eps,+you+can+change
+++//$("#special").click(function(e){
+++$(".imgWrap").mousemove(function(e){
+++++now+=+Date.now();
+++++delta+=+now+-+then;
+++++if+(delta+>+interval)+{
+++++++then+=+now+-+delta+%25+interval;+//subtract+extra+waited+time
+++++++//$('#status2').html(e.pageX+%2B',+'%2B+e.pageY);
+++++++//alert(e.pageX+%2B+',+'+%2B+e.pageY);
+++++++mouseX+=+e.pageX;
+++++++mouseY+=+e.pageY;
+++++++//+do+your+thing
+++++}
+++});+
})|code-block|syntax|javascript|8u26d|EDIT:我不知道then是javascript中的保留字，你可以重命名它。^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|K|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|L|9|@]|A|@]|B|$]]]]

try a maximum event per second based approach:

<pre><code>jQuery(document).ready(function(){
 var now, then, delta, interval = 1000/60; //maximum 60 eps, you can change
 //$("#special").click(function(e){
 $(".imgWrap").mousemove(function(e){
 now = Date.now();
 delta = now - then;
 if (delta &gt; interval) {
 then = now - delta % interval; //subtract extra waited time
 //$('#status2').html(e.pageX +', '+ e.pageY);
 //alert(e.pageX + ', ' + e.pageY);
 mouseX = e.pageX;
 mouseY = e.pageY;
 // do your thing
 }
 }); 
})
</code></pre>

EDIT: didn't know then is a reserved word in javascript, you can rename it.

entityMap|blocks|key|4feq3|text|我在angular中有一个可排序的列表视图，但在chrome中用鼠标拖动项目会有很大的滞后。我试着禁用了所有的chrome扩展，现在延迟完全消失了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|8g6er|事实证明是TamperMonkey造成的。^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|E|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|F|9|@]|A|@]|B|$]]]]

I have a sortable listview in angular, but dragging items with the mouse in chrome was lagging a lot. I tried disabling all chrome extensions and now the lag is totally gone.
It turned out that TamperMonkey was causing it.

I am trying to obtain the image effect that 99designs is obtaining when hovering a mouse over a design.. <a href="http://99designs.ca/logo-design/contests/runningbug-needs-logo-220626" rel="nofollow">[99designs.ca] Logo design contest: Runningbug Needs Logo 220626</a>

I am currently obtaining the position of the mouse on mousemove, then using that to move my popover <code>&lt;img&gt;</code>, and everything works fine, but it is very laggy.. and presumably its from so many calls being made.

To get the position of the mouse:

<pre><code>jQuery(document).ready(function(){
 //$("#special").click(function(e){
 $(".imgWrap").mousemove(function(e){
 //$('#status2').html(e.pageX +', '+ e.pageY);
 //alert(e.pageX + ', ' + e.pageY);
 mouseX = e.pageX;
 mouseY = e.pageY;
 }); 
})
</code></pre>

I'm not sure of another way I can do this.. any ideas?

On the full course of events is the following:

<ol>
<li>User mouses over an img tag.</li>
<li>I get the position of the mouse as per above.</li>
<li>The <code>&lt;img&gt;</code> tag also calls a js function which changes the position of an img tag to the position of the mouse.</li>
</ol>

Actually, you can check it here: <a href="http://pokemonpacific.com/index2" rel="nofollow">pokemonsite</a>

update: I see there is a bounty placed (thanks !). I'm a little busy at the moment and can't check all the other answers, but I'll make sure to check them asap

mouseMove very laggy

jQuery

 我正在尝试获得99design在将鼠标悬停在设计上时所获得的图像效果。[99designs.ca]徽标设计竞赛:运行错误需要徽标220626 我现在正在获取鼠标在mousemove上的位置，然后用它来移动我的弹出窗口图片 ，并且一切运行正常，但它是非常迟钝的..。可能是因为打了这么多电话。 要获取鼠标的位置，请执行以...

问mouseMove非常滞后
EN

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问mouseMove非常滞后EN