3

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

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

我在 Firefox 25 上进行了测试，我得到了这个错误：

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

我该如何解决？有没有其他方法/插件可以做到这一点？

谢谢你。

4

4 回答 4

4

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

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

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

于 2014-09-13T14:25:29.467 回答
0

使用 Clay.js ( https://github.com/zzarcon/clay ) 检测元素大小的变化非常简单：

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

el.on('resize', function(size) {
   console.log(size.height, size.width);
});
于 2015-08-05T16:17:55.447 回答
0

DIV 不会触发调整大小事件，因此您将无法完全按照您的编码进行操作，但您可以查看监控 DOM 属性。

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

于 2016-10-15T14:24:49.460 回答
-3

去掉那个插件，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：没有测试

于 2013-11-13T14:37:33.443 回答