It has always been a pain to deal with cross browser issues of the window's resize event:
- in IE, many resize events fire as long as the user continues resizing the window,
- Chrome an Safari behave like IE, but resize events always fire two by two,
- Firefox used to fire one resize event at the end of the resizing, but now behaves like IE,
- Opera behaves like IE, but fires resize events at a reduced rate.
This project offers two scripts, each providing a special jQuery event that make resize more manageable:
- jquery.debouncedresize.js: adds a special event that fires once after the window has been resized,
- jquery.throttledresize.js: adds a special event that fires at a reduced rate (no more double events from Chrome and Safari).
The Demo should help you make your choice.
Note to previous users: jquery.debouncedresize.js is the equivalent of the old jquery.smartresize.js, only the name of the special event changes. Update is not required unless you want to add jquery.throttledresize.js to a page page that already has jquery.smartresize.js.
Simply bind your special event just like a normal resize event.
$(window).on("debouncedresize", function( event ) {
// Your event handler code goes here.
});
// or...
$(window).on("throttledresize", function( event ) {
// Your event handler code goes here.
});
// unbind at will
$(window).off( "debouncedresize" );
Both special events have a .threshold option:
- in jquery.debouncedresize.js, it defines the interval used to determine if two
resizeevents are part of the samedebouncedresizeevent. Defaults to 150 (milliseconds) - in jquery.throttledresize.js, it defines the number of animation ticks (or frames) between each
throttledresizeevent. Defaults to 0 (tick), which means that it's going to fire at a maximum of 60fps.
They can be modified globally once the script has been loaded:
// increase the threshold to 250ms
$.event.special.debouncedresize.threshold = 250;
// decrease the firing rate to a maximum of 30fps
$.event.special.throttledresize.threshold = 1;
// 2 <=> 20fps, 3 <=> 15fps, ...
Triggering those events is achieved using jQuery's standard API:
$(window).trigger( "debouncedresize" );
It's also possible to execute the handler of any listener synchronously (without the delays):
$(window).trigger( "throttledresize", [true] );
Most of the time, I find myself using debouncedresize just to register a single listener on window.
As it turns out, all the features I need actually fit in 91 bytes:
// debulked onresize handler
function on_resize(c,t){onresize=function(){clearTimeout(t);t=setTimeout(c,100)};return c};
Using it is pretty simple:
on_resize(function() {
// handle the resize event here
...
});
Initializing a page (by executing the resize handler when the page loads) couldn't be easier:
on_resize(function() {
...
})(); // these parenthesis does the trick
No files are provided for this function, simply copy/paste it from this README.
MIT licensed http://louisremi.mit-license.org/
Copyright (c) 2012 Louis-Rémi Babé.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent