Menu
A JavaScript question.
Does anyone know why that in some browsers window.onresize gets called when the page is loading?
Can this be avoided?
I found the problem in IE, Firefox 27 for Android mobile(Tested on Samsung Galaxy S3), Google Nexus 7(Tested on Browserstack) and Windows Phone 8(Internet Explorer).
My testpage look like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script type="text/javascript">
window.onresize = resize;
function resize(){
alert("resize event detected!");
}
</script>
</head>
<body>
</body>
</html>
Solution:
var windowWidth = $(window).width();
window.onresize = resize;
function resize(){
if($(window).width()!=windowWidth){
alert("Bingo");
windowWidth = $(window).width();
}
}
577
The onresize event occurs when the browser window has been resized. Tip: To get the size of an element, use the clientWidth, clientHeight, innerWidth, innerHeight, outerWidth, outerHeight, offsetWidth and/or offsetHeight properties.
In this case, we will use the native JavaScript event 'resize' in order to trigger the resize event as per our convenience. The syntax would be: $(window). trigger('resize'); $(<element>).
Answer: Use the addEventListener() Method You can simply use the addEventListener() method to register an event handler to listen for the browser window resize event, such as window. addEventListener('resize', ...) . The following example will display the current width and height of the browser window on resize.
As far as I can tell, window.onresize does not get called on page load by default on desktop browsers
I wrote a simple html page as follows (many H1s to make the page have some content):
<!DOCTYPE html>
<html>
<head>
<script>
var i = 0;
window.onresize = function() {
i++;
}
window.setTimeout(function() {
alert("resize called " + i + " times");
}, 2000);
</script>
</head>
<body>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
</body>
</html>
The alert shows 0 in the following browsers:
I can see your problems seem to be on mobile devices. onresize may fire on page load due to the "visual viewport" resizing after the mobile browser has loaded the content and figured out how to scale the page to your screen size.
See here for an explanation of mobile viewports:
http://www.quirksmode.org/mobile/viewports2.html
And see here for a table of how several mobile browsers handle the onresize event for the visual viewport:
http://www.quirksmode.org/dom/events/resize_mobile.html
If this is the case then I think you might have a very tough time combating it.
onresize
To avoid the first run of your event handler for onresize you could simply set a flag like so:
var initial = true;
$(window).on('resize',function(){
if(!initial)
{
// do your stuff here
}else
{
// don't do your stuff here
}
initial = false;
});
However, as you say in the comments this will not work if onresize is working as expected (and not running on page load). It assumes that the first run will be on page load.
66
I had the same issue on Chrome 36 for Android. A resize event was triggered at some point on first page load when I was not expecting this to happen (it causes some minor visual glitch at page rendering). After investigating I tried to remove the part of my JavaScript that was dynamically appending the meta name="viewport" tag information after the document.ready event has fired (I used jQuery) and no more hazardous firing of the resize event.
One explanation could be that appending the viewport information after the page has already begun rendering will cause the resize event to trigger (which does make sense).
Of course this will only happen for browsers which do take the meta name="viewport" tag information into account i.e. mobile browsers mainly (I have not tested IE11 on 8.1 but given it is an hybrid OS it could be taking into account meta name="viewport" tag information).
34
I had the issue that sometimes multiple resize events where fired after loading the page. To ensure only real resize events are considered, I used a timer to ignore the event for the first 500ms after page load. This way, it will work in all browsers, regardless whether they fire one or multiple resize events after loading.
var realResize = false;
setTimeout(function() {
realResize = true;
}, 500);
window.onresize = function() {
if (realResize) {
// do something
}
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
