Because many pages are absolutely positioned on the UI, changing the window size will make the original layout messy, so every time the window. relayout when resize... then there are several events on the page that dynamically add DOM elements. For example, clicking a layer will list the details of this layer, so there is no problem in FF and chrome, but in the IE6-8 every time re-layout.
For example, when I drag a layer, the content in the middle layer is displayed at the bottom. When I open the layer, the layer jumps back to the position before the drag...
At first, I didn't see that it was a re-layout... then I demonstrated N for a long time, struggled N for a long time, and finally thought it was possible that the window was triggered due to the dynamic addition of DOM nodes. resize and re-layout the page...
Finally, I couldn't help shouting "Thank godness...". Fortunately, changing the height of the window has no effect on the page layout. Otherwise, it will be annoying...
The Code is as follows:
BindResizeWindow: function (){
Var obj = this;
$ (Window). resize (function (){
Var newWidth = $ (window). width ();
If (newWidth = obj. Required wwidth) {return ;}
Obj. initUI ();
Obj. createUI ();
Obj. Required wwidth = newWidth;
});
},
You only need to determine in the binding method that the re-layout event is triggered only when the width is changed...