CODEWITHSUNDEEP
javascriptjqueryjquery-1.8
Alvaro
Alvaro

Reputation: 41595

Avoid resize event to be fired on page load in Chrome

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.

Upvotes: 8

Views: 6780

Answers (3)

Tobija Fischer
Tobija Fischer

Reputation: 264

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.

Upvotes: 2

thomas-j-moffett
thomas-j-moffett

Reputation: 126

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>

Upvotes: 8

Cafe Coder
Cafe Coder

Reputation: 934

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.

Upvotes: 0

Related Questions