如何在$(window).on('load')后触发jQuery，修复翻书插件加载尺寸异常

I’ve run into similar loading-order headaches between Elementor and third-party plugins before, so I totally get what you’re dealing with. The core issue here is that the plugin’s built-in rfbwp.resize trigger is firing too early—it’s likely running before Elementor has fully finished rendering your page content, or the PDF resources have loaded completely. That’s why the flipbook defaults to the minimum size instead of adjusting to its container’s proper dimensions.

The Solution: Trigger Resize After Full Page Load #

We need to explicitly fire the plugin’s resize event only after the entire window (including all assets and Elementor-rendered elements) has finished loading. Here’s the code to make that happen:

Add this custom JavaScript snippet to your site:

jQuery(window).on('load', function() {
    // Add a small buffer to ensure Elementor's dynamic content is fully ready
    setTimeout(function() {
        jQuery(window).trigger('rfbwp.resize');
    }, 100);
});

Why This Works: #

• $(window).on('load') waits until every resource (images, PDFs, Elementor’s dynamic elements) is fully loaded—unlike document.ready, which only waits for the DOM to finish parsing.
• The 100ms setTimeout adds a tiny safety buffer to account for any last-minute Elementor rendering that might happen right after the window load event fires. You can tweak this value if needed: 50ms might work for simpler pages, or you could bump it to 200ms if you’re still seeing sizing issues.

How to Add This Code to Your WordPress Site: #

• Elementor Custom Code: Go to Elementor → Custom Code → Add New. Set the type to JavaScript, paste the code, set the location to Footer, and publish it. Assign it to the specific page with your flipbook, or set it to load site-wide if you use the plugin elsewhere.
• Theme Customizer: Navigate to Appearance → Customize → Additional JS (depending on your theme) and paste the code in the JS section.
• Code Snippets Plugin: Install the Code Snippets plugin, create a new snippet, paste the code, set it to run on the front-end, and activate it.

Test resizing your browser after adding this—your flipbook should now load at the correct size, and still respond to window resizes as the plugin was designed to do.

内容的提问来源于stack exchange，提问作者Rob Teeuwen