如何等待PyScript包完全加载完成后再执行DOM修改操作？

原有方案失效原因 #

• window.load 事件触发时机远早于PyScript完成依赖拉取、Python运行时初始化、第三方包（如你使用的panel）渲染完成的节点，多数情况下你绑定该监听时事件已经触发完毕，回调自然不会执行。
• 原生DOM的change事件仅在表单控件值变更、用户主动交互时触发，panel插入表格属于框架内部的异步DOM渲染操作，不会触发原生change事件，对应监听无法生效。

推荐实现方式 #

1. 优先使用PyScript官方生命周期钩子 #

PyScript原生提供了全流程的自定义生命周期事件，是等待加载完成最稳定的方案：

• 监听py:ready事件：触发时机为Python运行时初始化完成、所有配置的依赖包安装完毕
• 监听py:all-done事件：触发时机为页面内所有PyScript代码块执行完成
  示例代码：

from pyscript import window, document
from pyodide.ffi import create_proxy

def post_load_callback(*args):
    # 此处编写DOM操作逻辑，例如移除指定元素
    need_remove = document.querySelector("#target-remove-el")
    if need_remove:
        need_remove.remove()

# 绑定PyScript生命周期事件，无需使用window.load
window.addEventListener("py:all-done", create_proxy(post_load_callback))

注意：不要给PyScript标签添加defer属性或手动延迟脚本加载，避免打乱事件触发顺序。

2. 针对Panel表格渲染的等待逻辑 #

如果需要精准等待Panel生成的表格完全插入DOM，仅等待PyScript加载完成不够——Panel组件自身渲染是异步流程，可按需选择以下方式：

• 若可修改Panel挂载代码：直接在表格挂载逻辑的最后一行调用DOM操作函数即可，无需额外监听事件
• 若无法修改挂载逻辑：使用轻量异步轮询检测目标元素是否渲染完成，示例：

from pyscript import document
import asyncio

async def wait_table_render():
    while True:
        # 检测Panel生成的表格节点是否存在
        table_node = document.querySelector(".panel-datatable table")
        if table_node:
            # 表格渲染完成，执行后续DOM操作
            loading_mask = document.querySelector("#loading-mask")
            if loading_mask:
                loading_mask.remove()
            break
        # 每50ms检测一次，避免频繁查询占用性能
        await asyncio.sleep(0.05)

asyncio.ensure_future(wait_table_render())

避坑提示 #

• 不要依赖window.load、DOMContentLoaded类原生页面加载事件绑定PyScript相关回调：这类事件触发时PyScript运行时通常还未启动，依赖包可能仍在下载，事件触发后再绑定的监听永远不会被执行。
• 不要给非表单元素绑定change、load事件等待框架渲染更新：这类事件不会响应框架的动态DOM插入操作，无法捕获渲染完成时机。

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