如何在fullpage.js加载完成后执行脚本？求完整实现示例

没问题！要解决脚本执行时机过早的问题，fullpage.js本身就提供了专门的回调机制，afterRender 回调就是最佳选择——它会在fullpage完成初始化、所有页面元素都渲染就绪后触发，刚好能让你的脚本在合适的时机执行。

完整实现示例 #

下面是一个可直接运行的完整代码，我会标注关键部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fullpage.js 脚本延迟执行示例</title>
    <!-- 引入fullpage的CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.20/fullpage.min.css">
    <style>
        /* 基础样式，可选 */
        .section {
            text-align: center;
            font-size: 2em;
            padding-top: 200px;
        }
    </style>
</head>
<body>
    <!-- fullpage的页面结构 -->
    <div id="fullpage">
        <div class="section">第一屏</div>
        <div class="section">第二屏</div>
        <div class="section">第三屏</div>
    </div>

    <!-- 引入fullpage的JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.20/fullpage.min.js"></script>
    <script>
        // 初始化fullpage
        new fullpage('#fullpage', {
            // fullpage的基础配置（可根据你的需求调整）
            navigation: true,
            sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE'],
            
            // 关键：afterRender回调，fullpage加载完成后触发
            afterRender: function() {
                // 把你的自定义脚本写在这里！
                console.log('fullpage已经完全加载好了，可以执行我的脚本啦～');
                
                // 举个实际例子：操作页面元素
                const firstSection = document.querySelector('.section:first-child');
                firstSection.innerHTML += '<p>这是fullpage加载完成后添加的内容</p>';
                
                // 这里可以放你原本有问题的脚本逻辑
                // 比如初始化图表、绑定事件、加载数据等等
            }
        });
    </script>
</body>
</html>

为什么这个方法有效？ #

• afterRender 是fullpage官方提供的生命周期回调，它的触发时机是所有section都已渲染、fullpage的动画和布局都完成之后，比普通的window.onload或DOMContentLoaded更精准，因为fullpage可能会有异步的DOM操作或动画初始化。
• 把你的脚本放在这个回调里，就能确保它操作的所有页面元素（尤其是fullpage生成的元素）都已经存在，不会出现“找不到元素”或“样式未生效”的问题。

如果你的脚本需要在每次切换屏幕时也执行，还可以用afterLoad回调——不过针对“加载完成后运行一次”的需求，afterRender就足够啦。

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