resize

  • Revision slug: Web/Reference/Events/resize
  • Revision title: resize
  • Revision id: 415317
  • Created:
  • Creator: raphaelstary
  • Is current revision? No
  • Comment fixes bug in request animation frame example (drawing code gets called multiple times in chrome)

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

(function() {

    window.addEventListener('resize', throttleResize, false);

    var resizeFired = false;
    var drawing = false;
    var requestAnimationFrame = window.requestAnimationFrame ||
                                window.mozRequestAnimationFrame ||
                                window.webkitRequestAnimationFrame;

    function throttleResize() {
        // set resizedFired to true and execute drawResize if it's not already running
        if (drawing === false) {
            resizeFired = true;
            drawResize();
        }
    }

    function drawResize() {
        // render friendly resize loop
        if (resizeFired === true) {
            resizeFired = false;
            drawing = true;

            /*
            handle drawing code
            ...
            */

            requestAnimationFrame(drawResize);
        } else {
            drawing = false;
        }
    }

})();

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>
(function() {

    window.addEventListener('resize', throttleResize, false);

    var resizeFired = false;
    var drawing = false;
    var requestAnimationFrame = window.requestAnimationFrame ||
                                window.mozRequestAnimationFrame ||
                                window.webkitRequestAnimationFrame;

    function throttleResize() {
        // set resizedFired to true and execute drawResize if it's not already running
        if (drawing === false) {
            resizeFired = true;
            drawResize();
        }
    }

    function drawResize() {
        // render friendly resize loop
        if (resizeFired === true) {
            resizeFired = false;
            drawing = true;

            /*
            handle drawing code
            ...
            */

            requestAnimationFrame(drawResize);
        } else {
            drawing = false;
        }
    }

})();
</pre>
<h4 id="setTimeout">setTimeout</h4>
<pre>
(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
    ...
  }

})()
;
</pre>
Revert to this revision