Revision 512661 of resize

  • Revision slug: Web/Reference/Events/resize
  • Revision title: resize
  • Revision id: 512661
  • Created:
  • Creator: kgreen
  • 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 = [],
        changed = false,
        running = false;                     

    // fired on resize event
    function resize() {
        if (!running) {
            changed = true;
            loop();
        }
    }

    // resource conscious callback loop
    function loop() {
        if (!changed) {     
            running = false;       
        }
        else {
            changed = false;
            running = true;            

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

            window.requestAnimationFrame(loop);
        }
    }

    // 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>
var optimizedResize = (function() {

    var callbacks = [],
        changed = false,
        running = false;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    // fired on resize event
    function resize() {
        if (!running) {
            changed = true;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; loop();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp; }

&nbsp;&nbsp;&nbsp; // resource conscious callback loop
&nbsp;&nbsp;&nbsp; function loop() {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (!changed) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; running = false;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        }
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; else {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; changed = false;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; running = true;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

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

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; window.requestAnimationFrame(loop);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
    }

    // adds callback to loop
    function addCallback(callback) {
        if (callback) {
            callbacks.push(callback);
        }
    }

    return {
        // initalize resize event listener
        init: function(callback) {
            if (window.requestAnimationFrame) {&nbsp;
                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>
 <span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.142em; letter-spacing: -0.25px; line-height: 16px;">setTimeout</span></div>
<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
    ...
  }

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