Avoid resize event to be fired on page load in Chrome

Asked 28/10, 2013 at 13:12 Answered 14/11, 2019 at 9:53

I've noticed the $.resize() event of jQuery is fired on page load without any actual "resize" of the window depending on the browser.

It is not only fired once, but even twice sometimes. (on load in Chrome 30.0.1599.101 m, on resize in Opera...)

Is this behave normal? Isn't there any way to unify this behavior on loading of the site for all browsers?

I'm already calling the resize only once when resizing have already finished (using an interval), but this doesn't solve the problem of the event being fired on load for Chrome.

I couldn't create a fiddle reproducing this problem, but you can test this behavior with a file like this:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
    $(window).resize(function() {
        alert("Fired!");
    });
</script>
</head>
<body>

</body>
</html>

The event will be fired the first time you load the page with Chrome. It won't be fired on any refresh of it.

Aspia answered 28/10, 2013 at 13:12 Comment(4)

What about hooking the event handler up when the document is loaded (i.e. ready)? $(document).ready(function() { $(window).resize(function() { alert("Fired!"); }); }); I'm not sure if this is the answer you are looking for as you ask two separate questions in your text that are somewhat disjoint from the title of this post. – Gaddy 28/10, 2013 at 13:24

@EiríkurFannarTorfason That doesn't prevent the event to be fired on load. – Aspia 28/10, 2013 at 14:10

Seems you are right. This appeared to work on my end when I first tested it but now I sometimes get the resize event handler triggered shortly after the window has loaded. – Gaddy 28/10, 2013 at 14:44

Your test HTML does not confirm that issue for Chrome 36. But I can see it (at least inside of x-size iframes), too. – Electrojet 22/7, 2014 at 9:3

I know that this is a somewhat old post, but I ran into a similar problem recently, and in looking for a solution I stumbled upon this post. I realized what the working solution should be (at least for me) before I was able to find any answers elsewhere. Although, re-reading this post now, I think some might have made comments similar to what I propose, but they were using the jQuery ready event instead of the window load event. I want to post my solution as an answer in case it helps others.

In most cases, you shouldn't need the resize event to be wired up until the page has finished loading. So, that's what my solution is based on. If you need the resize event set up for any reason before loading is complete, then this might not work for you.

I am using the approach below in a real project, and I haven't run into the issue of resize being fired multiple times (when it shouldn't).

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
    $(window).on('load', function () {
       // Only wire up the resize handler after loading is complete to prevent fire of resize before page is loaded.
       $(window).on('resize', function() {
            alert("Fired!");
        });
    });
</script>
</head>
<body>

</body>
</html>

Connective answered 31/1, 2016 at 20:22 Comment(0)

I also encounter this problem on chrome fairly often. For me, the solution is as simple as to set a small timeout before adding the event handler.

setTimeout(function(){
    $(window).on('resize', function(){
        alert("Fired!");
    });
}, 150);

As suggested from thomas-j-moffett, i would put this inside the window load event. This way you are not dependent on network speed (as opposed to the document ready event)

$(window).on('load', function(){
    setTimeout(function(){
        $(window).on('resize', function(){
            alert("Fired!");
        });
    }, 150);
});

P.S. 150ms delay worked fine for me, but you will probably have to test it for yourself.

Twelvemonth answered 14/11, 2019 at 9:53 Comment(0)

Here's a quick solution:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
    var windowResize={
        width:0,
        init:function() {
            this.width=$(window).width();
        },
        checkResize:function(callback) {
            if( this.width!=$(window).width() ) {
                callback.apply();
            }
        }
    };
    windowResize.init();
    $(window).resize(function() {windowResize.checkResize(function() {
            console.log("Fired!");
        });
    });
</script>
</head>
<body>

</body>
</html>

First, create an object like the windowResize object shown above. windowResize.init() measures the width of the window and stores the value in windowResize.width. Then, call windowResize.checkResize() with the desired callback function on $(window).resize(). windowResize.checkResize() checks the current window width, compares it with the stored value, and then fires your callback only when the width values are different.

Ointment answered 28/10, 2013 at 14:43 Comment(5)

This solution doesn't address the issue of multiple resize events firing on real window resizes (chrome will fire 4 or 2 events). So you should continue using your interval method for handling multiple events. – Ointment 28/10, 2013 at 14:46

this is not a robust solution, more like a hack and cost more resource, not gooood – Gluttonous 4/8, 2015 at 23:10

@KevinSimple Look at the date of the question. It seems like the issue has been resolved in most modern browsers as I haven't encountered such a problem recently. But back then, this was a real issue and the only way to get around it was to use a hacky solution. Anyway, I wonder if there's a way to flag outdated questions like this one. – Ointment 5/8, 2015 at 13:25

this is a code issue, not browser issue, a better way will be adding a timer delay before calling the checkResize, so the browser gets enough time to render dom, – Gluttonous 21/9, 2015 at 23:25

@KevinSimple I see. I haven't delayed the execution of the code as I assumed it's impossible to precisely anticipate when the redering would finish across different devices/browsers. However, I'll tryout your method along with calling windowResize.init() on $(document).ready() or $(window).load() next time. I'll post a comment if I find anything interersting. Thanks! – Ointment 24/9, 2015 at 4:13

Recommended topics

Hot tags