2

非常に単純な質問があります。少なくともそのように思えます。

すぐにサイズ変更される DIV 要素があります。サイズ変更の瞬間を捉えたい。

このようなもの：

function myFunction(){
 alert('The DIV was resized');
}

divElement.addEventListener("resize", myFunction, false);

誰も答えを知っていますか？

ありがとう

4

4 に答える 4

3

2011 年 12 月の時点で、div のサイズ変更を検出する組み込みイベントはなく、ウィンドウのサイズ変更のみです。

この関連する質問をチェックしてください: Detecting when a div's height changes using jQueryと、その質問に対する解決策からのこのプラグイン: http://benalman.com/projects/jquery-resize-plugin/

jQuery のサイズ変更イベントを使用すると、ウィンドウ以外の要素にサイズ変更イベント ハンドラーをバインドできるようになりました。

サイズ変更イベントにプラグインが必要なのはなぜですか?

ずいぶん前に、サイズ変更イベントはブラウザーのウィンドウ オブジェクトでのみ発生すると決定されました。残念ながら、別の要素のサイズがいつ変更されたかを知りたい場合は、その幅と高さを定期的に手動でテストして変更を確認する必要があります。このプラグインは、そのアプローチを回避するために内部的に特別なことは何もしませんが、イベントをバインドするために提供するインターフェイスは、window に既にあるものとまったく同じです。

すべての要素について、要素サイズの変更を定期的にチェックし、適切な場合にイベントをトリガーする内部ポーリング ループが開始されます。ポーリング ループは、イベントが実際にどこかにバインドされた場合にのみ実行され、すべてのサイズ変更イベントがバインド解除されると停止します。

サンプルコード

// You know this one already, right?
$(window).resize(function(e){
  // do something when the window resizes
});

// Well, try this on for size!
$("#unicorns").resize(function(e){
  // do something when #unicorns element resizes
});

// And of course, you can still use .bind with namespaces!
$("span.rainbows").bind( "resize.rainbows", function(e){
  // do something when any span.rainbows element resizes
});
于 2012-04-11T16:35:37.340 に答える
1

このプラグインを試すことができます - http://benalman.com/code/projects/jquery-resize/examples/resize/

様々な例があります。ウィンドウのサイズを変更して、コンテナ要素内の要素がどのように調整されたかを確認してください。

js フィドルの例

その resize() イベントは、クラス「test」を持つ要素とウィンドウ オブジェクトにバインドされ、ウィンドウ オブジェクトのサイズ変更コールバックで $('.test').resize() が呼び出されます。

例えば

$('#test_div').bind('resize', function(){
     console.log('resized');
});

$(window).resize(function(){
   $('#test_div').resize();
});

これを見る

于 2013-10-17T04:20:01.540 に答える
0

私の最初の考えは、カスタム イベント システムを使用することです。ここで純粋な JavaScript を見つけることができます ( http://www.nczonline.net/blog/2010/03/09/custom-events-in-javascript/ )

彼のコードを含めた後、次のようなことができます。

function myFunction(){
 alert('The DIV was resized');
}

div_elm = document.getElmentById('div-to-resize');
EventTarget.call(div_elm);
div_elm.addListener("resize", myFunction);

その後、div のサイズを変更する場所に 1 行追加するだけです。

div_elm.width += 100 //or however you are resizing your div
div_elm.fire("resize");

私はそれがあなたのために働くべきだと思います。

編集：

あなたがサイズ変更をコーディングしていない場合、私の最初の考えは次のようなものです：

var resizeScannerInterval_id = (function(div) {
    var width = div.offsetWidth;
    var height = div.offsetHeight;

    var interval_id = setInterval(function() {
        if( div.offsetWidth != width || div.offsetHeight != height )
            width = div.offsetWidth;
            height = div.offsetHeight;
            div.fire();
        }
    },250);

})(document.getElementById('div-id'))
于 2012-04-11T16:55:09.130 に答える
0

要素のサイズが変更されたかどうかを判断するための非常に効率的な方法があります。

http://marcj.github.io/css-element-queries/

このライブラリには、サイズ変更の検出に使用できるクラス ResizeSensor があります。イベントベースのアプローチを使用しているため、非常に高速で、CPU 時間を無駄にしません。

ループを使用して変更をチェックするため、jQuery onresize プラグインは使用しないでください。setTimeout()これは信じられないほど遅く、正確ではありません。

于 2013-10-17T03:56:56.420 に答える