jQuery检测元素大小调整

Question

我正在尝试使用jQuery Resize插件（http://benalman.com/projects/jquery-resize-plugin/）在jQuery 1.10.2上检测元素大小调整。

$("#element").resize(function(){
  console.log("resize");
});

我在 Firefox 25 上进行测试时出现了以下错误：

Error: TypeError: r is undefined
Source File: jquery.ba-resize.min.js
Line: 9

我该如何解决这个问题？有没有其他的方法或插件可以实现这个功能？

谢谢。

- user1995781

---

只需移除那个插件！你就完成了。 - l2aelba

Answer 1

您需要一个调整大小的传感器，该传感器与https://github.com/marcj/css-element-queries的css元素查询捆绑在一起。

new ResizeSensor($('.elements'), function(){
    console.log('resize')
});

jQuery的.resize仅适用于window对象，因为只有window具有事件onresize。所有其他元素都没有，因此您需要使用polyfill。我见过许多其他jQuery插件，可以使您监听所有元素类型的调整大小更改，但要小心：这些非常慢，因为它们使用setTimeout()或间隔来检查其维度变化，而不是设置真正的调整大小传感器，就像您可以在上面的链接中找到的那样。

- Marc J. Schmidt

---

我不明白你是如何在没有setTimeout()或requestAnimationFrame()的情况下监听resize事件的，实际上你的代码似乎使用了它们...我错过了什么吗？https://github.com/marcj/css-element-queries/blob/93626d81fd9c0f14adbe1bcf82a06e7beaaafbdb/src/ResizeSensor.js#L13 - Fabio Iotti

这个动画帧或setTimeout是用于其他目的的。它用于平滑所有这些事件回调调用。通常，浏览器可以更快地渲染超过60fps，但如果您将调整大小侦听器附加到动画div，则会调用大量事件。将这些事件减少到每帧最多1个回调有助于节省CPU时间。它与缓慢的调整大小检测无关，而是恰恰相反：它通过使用onscroll事件hack来帮助减缓非常快的调整大小检测。 - Marc J. Schmidt

哦，那完全有道理。 :) 谢谢你分享你的技巧，看起来互联网依赖它。 - Fabio Iotti

Answer 2

标签不会触发resize事件，因此您将无法完全执行编码操作，但您可以查看监视DOM属性的内容。

如果您实际上正在使用类似可调整大小的东西，并且那是div更改大小的唯一方法，那么您的调整大小插件可能会实现自己的回调。

- Mohammad Jamal Dashtaki

Answer 3

使用 Clay.js（https://github.com/zzarcon/clay）可以很容易地检测元素大小的变化：

var el = new Clay('.element');

el.on('resize', function(size) {
   console.log(size.height, size.width);
});

- Zzarcon

Answer 4

移除那个插件，jQuery自己就能完成。

var element = $('#element');
var current_size = element.width()+'x'+element.height();
element.resize(function(){ 
    var this_size = $(this).width()+'x'+$(this).height();
    if(current_size!==this_size){
      console.log('changed');
      current_size = this_size;
    }
});

PS：不测试

- l2aelba

---

也许你需要使用 Mousedown()，Mouseup() 函数？@user1995781 - l2aelba

我不理解这个答案。 - eremzeit