resizilla
A Better Window Resize
Why?
- When the user resizes a range of events are fired when using:
window.onresize
& window.addEventListener()
. Resizilla reduces the frequency of calls using a debounce algorithm for better performance. - Supports orientation change.
- Built in destroy method that removes eventListeners.
- full control
How?
via npm
npm i resizilla --save
yarn add resizilla
Usage:
resizilla(handler, delay, incept);
- handler: Function to execute on resize
- delay: Delay of the function call in ms on resize
- incept: If true the function call at the beginning of the detection period, if false the call will be at the end of the detection period (false by default)
also
resizilla(
handler, - Function
delay, - Number (Milliseconds)
incept, - Boolean
useCapture, - Boolean
orientationChange - Boolean
);
- useCapture: Register the event handler for the capturing/ bubbling phase.
- orientationChange: See below...
Tested browsers:
- Chrome 14+
- Safari 5.1+
- Firefox 4+
- Opera 10.6+
- IE9+
- Edge
- iPhone 3GS+
- iPad 2+
- Android 2.2+
- Windows Phone 8.1+
Mobile:
By default, resizilla calls the handler when the "orientationchange" event is fired. This can be disabled using
orientationChange: false
Destroy:
Remove the internal event listeners by using the below:
const {destroy} = resizilla(...);
destroy();
destroy('resize');
destroy('orientationchange');
And reuse resizilla at any point in time.
The example:
The current example only needs to reveal the transition of the debounce to satisfy as working.
So no element resize support?
To detect changes that occur with elements checkout getComputedStyle, transitionEnd & MutationObserver.
(Original ASCII art by Mozilla, of course)
Big thanks to BrowsreStack for sponsoring this project via cross browser testing.
MIT License
Copyright (c) 2017 Julien Etienne