Cross-browser resize event analysis and browser resize event

Cross-browser resize event analysis and browser resize event
Native event analysis of the resize event

Window resize event:

• IE7 trigger 3 times, IE8 trigger 2 times, IE9 trigger 1 time, IE10 trigger 1 time

• Chrome triggered once

• FF triggered twice
• Opera triggered once
• Safari triggered once

Scenario Analysis

• During window resize, some components need to reset the size (once); some components do not need to reset the size;

Open-source database analysis

• Jquery-resize

Advantage: easy to use

  $('#div1').on('resize', function (e) {    console.log('[div1] resize');  })  $('#div1').resize(function (e) {    console.log('[div1] resize2');  });

Disadvantage: Internal round robin, worrying Performance

function loopy() {    // Start the polling loop, asynchronously.    timeout_id = window[ str_setTimeout ](function(){      // Iterate over all elements to which the 'resize' event is bound.      elems.each(function(){        var elem = $(this),          width = elem.width(),          height = elem.height(),          data = $.data( this, str_data );        // If element size has changed since the last time, update the element        // data store and trigger the 'resize' event.        if ( width !== data.w || height !== data.h ) {          elem.trigger( str_resize, [ data.w = width, data.h = height ] );        }      });      // Loop.      loopy();    }, jq_resize[ str_delay ] );};

• Jquery-smartresize

Advantages: Debounced and Throttled are two types, with clear types

Disadvantage: ease of use

$(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" );

Conclusion

In most scenarios, jquery-smartresize Debounced can be used for one call.

How does jquery resize listen to the resize event of div or other elements?

The default resize of jquery can only listen for changes in the browser window size, but we may also need to listen for changes in the size of a div or other labels in actual use for corresponding processing, you cannot use the default resize. What should I do? Here we recommend a small jquery plug-in, which is equivalent to the enhanced version of the default resize event. jquery's default resize can only listen to changes in the browser window size, however, in actual use, we may also need to listen for changes in the size of a div or other labels for corresponding processing. If we use the default resize, we will be powerless. What should we do? Here we recommend a small jquery plug-in, which is equivalent to an enhanced version of the default resize event. It can listen to almost all the changes in the label size for corresponding processing. Copy the following code to your js file (function ($, h, c) {var a =$ ([]), e = $. resize = $. extend ($. resize, {}), I, k = "setTimeout", j = "resize", d = j + "-special-event", B = "delay ", f = "throttleWindow"; e [B] = 250; e [f] = true; $. event. special [j] = {setup: function () {if (! E [f] & this [k]) {return false} var l =$ (this); a =. add (l); $. data (this, d, {w: l. width (), h: l. height ()}); if (. length = 1) {g () }}, teardown: function () {if (! E [f] & this [k]) {return false} var l =$ (this); a =. not (l); l. removeData (d); if (! A. length) {clearTimeout (I) }}, add: function (l) {if (! E [f] & this [k]) {return false} var n; function m (s, o, p) {var q =$ (this), r = $. data (this, d); r. w = o! = C? O: q. width (); r. h = p! = C? P: q. height (); n. apply (this, arguments)} if ($. isFunction (l) {n = l; return m} else {n = l. handler; l. handler = m }}; function g () {I = h [k] (function () {. each (function () {var n = $ (this), m = n. width (), l = n. height (), o = $. data (this, d); if (m! = O. w | l! = O. h) {n. trigger (j, [o. w = m, o. h = l]) }}); g ()}, e [B]) }} (jQuery, this ); in the code, we can directly use $ ("# div "). resize (function (){...}); to implement corresponding logic processing when the dimensions of the element whose listening id is div are changed.

The onresize event in JavaScript cannot be executed.

The first method has been tried .. FF is feasible to control.
<Body onResize = "fastness ()">
<Center> </center>
<Script language = "JavaScript">
Function fastness (){
Window. resizeTo (600,450 );
}
Document. body. onload = fastness;
</Script>
</Body>
There is another way .. Before you open the current page. Use OPEN ("Current page address", "_ self", and "resizeable = 0") to lock the page size.