mozilla

Revision 629935 of resize

  • Revision slug: Web/Events/resize
  • Revision title: resize
  • Revision id: 629935
  • Created:
  • Creator: codeboy
  • Is current revision? No
  • Comment

Revision Content

The resize event is fired when the document view has been resized.

General info

Specification
DOM L3
Interface
UIEvent
Bubbles
No
Cancelable
No
Target
defaultView (window)
Default Action
None

Properties

{{OpenEventProperties()}}{{UIEventProperties()}}{{CloseEventProperties()}}

Example

Since resize events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications. Instead, it is recommended to throttle the event using requestAnimationFrame or setTimeout, as follows:

requestAnimationFrame

var optimizedResize = (function() {

    var callbacks = [],
        running = false;

    // fired on resize event
    function resize() {

        if (!running) {
            running = true;

            if (window.requestAnimationFrame) {
                window.requestAnimationFrame(runCallbacks);
            } else {
                setTimeout(runCallbacks, 66);
            }
        }

    }

    // run the actual callbacks
    function runCallbacks() {

        callbacks.forEach(function(callback) {
            callback();
        });

        running = false;
    }

    // adds callback to loop
    function addCallback(callback) {

        if (callback) {
            callbacks.push(callback);
        }

    }

    return {
        // initalize resize event listener
        init: function(callback) {

            if (window.requestAnimationFrame) {
                window.addEventListener('resize', resize);
                addCallback(callback);
            }

        },

        // public method to add additional callback
        add: function(callback) {
            addCallback(callback);
        }
    }
}());

// start process
optimizedResize.init(function() {
    console.log('Resource conscious resize callback!')
});
 

setTimeout

(function() {

  window.addEventListener("resize", resizeThrottler, false);

  var resizeTimeout;
  function resizeThrottler() {
    // ignore resize events as long as an actualResizeHandler execution is in the queue
    if ( !resizeTimeout ) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();
     
       // The actualResizeHandler will execute at a rate of 15fps
       }, 66);
    }
  }

  function actualResizeHandler() {
    // handle the resize event
    ...
  }

}());

Revision Source

<p>The <code>resize</code> event is fired when the document view has been resized.</p>
<h2 id="General_info">General info</h2>
<dl>
 <dt style="float: left; text-align: right; width: 120px;">
  Specification</dt>
 <dd style="margin: 0 0 0 120px;">
  <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-resize">DOM L3</a></dd>
 <dt style="float: left; text-align: right; width: 120px;">
  Interface</dt>
 <dd style="margin: 0 0 0 120px;">
  UIEvent</dd>
 <dt style="float: left; text-align: right; width: 120px;">
  Bubbles</dt>
 <dd style="margin: 0 0 0 120px;">
  No</dd>
 <dt style="float: left; text-align: right; width: 120px;">
  Cancelable</dt>
 <dd style="margin: 0 0 0 120px;">
  No</dd>
 <dt style="float: left; text-align: right; width: 120px;">
  Target</dt>
 <dd style="margin: 0 0 0 120px;">
  defaultView (window)</dd>
 <dt style="float: left; text-align: right; width: 120px;">
  Default Action</dt>
 <dd style="margin: 0 0 0 120px;">
  None</dd>
</dl>
<h2 id="Properties">Properties</h2>
<p>{{OpenEventProperties()}}{{UIEventProperties()}}{{CloseEventProperties()}}</p>
<h2 id="Example">Example</h2>
<p>Since <code>resize</code> events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications. Instead, it is recommended to throttle the event using <a href="/en-US/docs/DOM/window.requestAnimationFrame" title="/en-US/docs/DOM/window.requestAnimationFrame">requestAnimationFrame</a> or setTimeout, as follows:</p>
<h4 id="requestAnimationFrame">requestAnimationFrame</h4>
<pre class="brush: js">var optimizedResize = (function() {

    var callbacks = [],
        running = false;

    // fired on resize event
    function resize() {

        if (!running) {
            running = true;

            if (window.requestAnimationFrame) {
                window.requestAnimationFrame(runCallbacks);
            } else {
                setTimeout(runCallbacks, 66);
            }
        }

    }

    // run the actual callbacks
    function runCallbacks() {

        callbacks.forEach(function(callback) {
            callback();
        });

        running = false;
    }

    // adds callback to loop
    function addCallback(callback) {

        if (callback) {
            callbacks.push(callback);
        }

    }

    return {
        // initalize resize event listener
        init: function(callback) {

            if (window.requestAnimationFrame) {
                window.addEventListener('resize', resize);
                addCallback(callback);
            }

        },

        // public method to add additional callback
        add: function(callback) {
            addCallback(callback);
        }
    }
}());

// start process
optimizedResize.init(function() {
    console.log('Resource conscious resize callback!')
});
</pre>
<div>
  </div>
<h4 id="setTimeout">setTimeout</h4>
<pre class="brush: js">(function() {

  window.addEventListener("resize", resizeThrottler, false);

  var resizeTimeout;
  function resizeThrottler() {
    // ignore resize events as long as an actualResizeHandler execution is in the queue
    if ( !resizeTimeout ) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();
     
       // The actualResizeHandler will execute at a rate of 15fps
       }, 66);
    }
  }

  function actualResizeHandler() {
    // handle the resize event
    ...
  }

}());<span style="font-size: 14px; line-height: 18px; white-space: normal;">
</span></pre>
Revert to this revision