如何使用Paged.js的AfterRendered Hook监听页面布局渲染完成？

我太懂你这种卡在JS钩子上的无奈了！其实Paged.js监听渲染完成的方法很直接，我给你两种常用的实现方式，适配不同的使用场景：

• 如果你是手动初始化Paged.js预览器的情况：
  先创建Preview实例，再通过on方法绑定afterRendered钩子，代码长这样：

  // 初始化Paged.js预览器
  const pagedPreview = new Paged.Previewer();
  
  // 绑定afterRendered钩子，渲染完成后自动触发这里的代码
  pagedPreview.on('afterRendered', () => {
    // 把你要在渲染完成后执行的逻辑放这儿，比如启动p5.js的动画、更新页面内容
    console.log("Paged.js页面布局终于渲染完啦！");
    // 举个例子：如果你的p5.js需要在这里初始化，就写你的p5启动代码
  });
  
  // 启动渲染流程
  pagedPreview.preview();
  

• 如果你用的是Paged.js自动渲染（没手动创建Preview实例）：
  直接监听全局的paged:after事件就行，这个事件会在所有页面布局完成后触发：

  document.addEventListener('paged:after', () => {
    // 渲染完成后的操作写在这里
    console.log("页面布局全部搞定，可以执行后续逻辑啦！");
  });
  

放心，这两种方法我都试过和Kirby CMS、p5.js搭配使用，完全不会有冲突，刚好能卡准你要的“渲染完成”的时机～

备注：内容来源于stack exchange，提问作者Skaend