📜 ⬆️ ⬇️

We solve the problem of calling the onresize event in IE until the onload event has occurred.

In Internet Explorer, there is a strange thing (one of many) that is to trigger the onresize event if and only when the document is fully loaded. This problem exists in IE 6, 7, 8. There was a desire to overcome this disgrace and make it quite transparent, so that the handlers could be hung without thinking that they could be called much later than expected.

I use jQuery and its internal mechanism of special events, so that while the document is loaded, you can use the onresize alternative, and then return everything to its place.

In order not to describe the mechanism of special events I will attach a link
')
and now the actual code:

( function ($, resize){
if ($.browser.msie) {
var

// Boolean ,
documentIsLoaded,

/*
* jQuery window
* onload
*/
$window = $(window).one( "load" , function (){
// , 1 (true)
documentIsLoaded = 1;
});

// onresize
function backToNative () {
$. event .special[resize] = undefined;
var events = $window.data( "events" ),
// , .
eventStack = events && events[resize];
// , .
if (eventStack) {
events[resize] = undefined;
}
// onresize, addEventListener/attachEvent
$window.one(resize, $.noop);
// , .
if (eventStack) {
events[resize] = eventStack;
}
}

// special jQuery
$. event .special[resize] = {
setup: function () {
if (documentIsLoaded) {
backToNative();
// false
return !documentIsLoaded;
}
var
// setInterval
checking,
//
prevWidth = $window.width(),
//
prevHeight = $window.height();

//
( function handler (){
if (documentIsLoaded) {
window.clearInterval(checking);
backToNative();
return ;
}

var
width = $window.width(),
height = $window.height();

/*
*
* ,
*/
if (width != prevWidth || height != prevHeight) {
prevWidth = width;
prevHeight = height;
$window.trigger(resize);
}

// ,
if (!checking) {
checking = window.setInterval(handler, 100);
}
})();
},
teardowm: $.noop
};
}
})(jQuery, "resize" );


* This source code was highlighted with Source Code Highlighter .


And now you can safely assign handlers both before and after loading the document.
var count1 = 1;
jQuery(window).resize( function (){
alert(count1++);
});
var count2 = 10;
jQuery(window).bind( "resize" , function (){
alert((count2 += 10));
});


* This source code was highlighted with Source Code Highlighter .


PySy jQuery Version 1.4.2 Used
PySySy in jQuery 1.4.2 this fix does not work In the new version, the event delegation system has been changed. In the near future will be posted a compatible fix with a newer version.

UPD onresize for items
$ ("Div"). Resize (function () {
console.log ("width:" + $ (this) .width () + ", height:" + $ (this) .height () + ");
});

https://code.google.com/p/jresizeevent/

Source: https://habr.com/ru/post/83536/


All Articles