Hey there! Let's figure out why your jQuery window.resize event isn't firing after a page refresh—this is a common issue, but the fixes are usually straightforward. Here are the most likely solutions:

1. Ensure the Event is Bound After the DOM is Ready #

If your resize handler references elements in your HTML (like #visibility or .media-carousel), binding the event before the DOM fully loads can cause unexpected behavior after refresh. Wrap your resize code in a DOM ready handler to guarantee all elements exist when the event is attached:

$(document).ready(function() {
  $(window).on('resize', function() {
    // Your resize logic here
    console.log('Resize event triggered!'); // Add this test to confirm it's working
  });
});

Using $(window).on('resize', ...) is more flexible than the shorthand $(window).resize(...) and works better if you ever need to manage multiple resize handlers later.

2. Manually Trigger the Resize Event on Page Load #

Browsers don’t automatically fire the resize event when the page finishes loading. If your logic needs to run once at page load (in addition to when the window is resized), trigger the event manually after binding it:

$(document).ready(function() {
  const handleResize = function() {
    // Your resize logic here
    console.log('Resize handled!');
  };

  // Bind the resize event
  $(window).on('resize', handleResize);
  
  // Trigger it once immediately (including after refresh)
  handleResize();
});

This ensures your code runs both when the window is resized and right after the page refreshes—perfect for responsive layout adjustments.

3. Check for Conflicting Scripts Unbinding the Event #

If another script on your page uses $(window).off('resize') (which removes all resize handlers), that would prevent your event from firing after refresh. Search your codebase for any instances of off('resize') and adjust them to target specific handlers if needed:

Instead of removing all handlers (avoid this if possible):

$(window).off('resize');

Target a specific handler by using a named function:

// Only unbind the specific handler you want to remove
$(window).off('resize', handleResize);

4. Verify Your Resize Logic Doesn’t Depend on Unloaded Elements #

If your resize handler interacts with images (like .graphics), make sure those images are fully loaded before the handler runs. For image-dependent logic, use $(window).load() instead of $(document).ready() to wait for all assets to load:

$(window).load(function() {
  $(window).on('resize', function() {
    // Now all images are loaded, so you can safely access their dimensions
    const firstImageWidth = $('.graphics').first().width();
    console.log('First image width:', firstImageWidth);
  });
});

Content of this answer is based on a question from Stack Exchange, asked by edi_90