Menu
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.
457
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>
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.
2
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
