Geek Answers Handbook

Why is window.onresize called when the page loads?

JavaScript question.

Does anyone know why in some browsers window.onresize is called when the page loads?

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 browser) and Windows Phone 8 (Internet Explorer).

My test page looks 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>

Decision:

 var windowWidth = $(window).width(); window.onresize = resize; function resize(){ if($(window).width()!=windowWidth){ alert("Bingo"); windowWidth = $(window).width(); } }
+7
javascript window-resize
source share
3 answers

As far as I can tell, window.onresize not called when the default page loads on desktop browsers

I wrote a simple html page as follows (many H1 so that the page has 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 warning shows 0 in the following browsers:

  • Chrome 32
  • Firefox 26
  • Opera 12
  • IE11
  • IE8
  • Safari 5.1.7

Theory of viewing mobile browsers

I see that your problems seem to be on mobile devices. onresize may work when the page loads due to the resizing of the "visual viewing" after the mobile browser has downloaded the content and figured out how to scale the page to fit the screen.

See here for an explanation of mobile viewports:

http://www.quirksmode.org/mobile/viewports2.html

And look 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 so, I think it can be very difficult for you to deal with it.

Ignoring the first call to onresize

To avoid starting the event handler for onresize for the onresize , you can simply set the flag as follows:

 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 works as expected (and does not work when the page loads). He assumes that the first run will be on page loading.

+2
source share

I had a problem that sometimes included several resizing that started after the page loaded. To make sure that only real resizing events are taken into account, I used a timer to ignore the events for the first 500 ms after the page loads. Thus, it will work in all browsers, regardless of whether they fire one or more resize events after loading.

 var realResize = false; setTimeout(function() { realResize = true; }, 500); window.onresize = function() { if (realResize) { // do something } };
+1
source share

I had the same issue in Chrome 36 for Android. A resize event was triggered at some point in the loading of the first page, when I did not expect this to happen (this causes a slight visual glitch when rendering the page). After investigating, I tried to remove the part of my JavaScript that dynamically added the meta name = "viewport" tag information after the document.ready event was fired (I used jQuery) and did not cause a dangerous resize event.

One explanation may be that adding viewport information after the page has already started rendering will trigger a resize event (which makes sense).

Of course, this will happen only for browsers that accept meta name = "viewport" tag information, that is, mobile browsers mainly (I have not tested IE11 on 8.1, but considering that it is a hybrid OS that it can accept meta name = information about tag "viewport").

0
source share

More articles:


All Articles