Google AMP中ready事件的等效实现及动作绑定方法咨询

嘿，我来帮你理清在Google AMP里怎么实现类似原生DOMContentLoaded/ready事件的功能，以及如何绑定自动触发的动作～

一、页面级加载完成的事件实现 #

AMP有自己的页面加载流程，原生的window.onload或者DOMContentLoaded虽然能监听，但更推荐用AMP官方提供的方案来适配它的加载机制：

1. 使用amp-onload属性直接绑定 #

你可以直接在<body>标签上添加on="amp-onload:你的动作"，这是AMP专门用来监听页面完全加载完成的事件。比如要触发自定义逻辑，可以配合amp-script：

<body on="amp-onload:script:initApp()">
  <!-- 引入amp-script组件 -->
  <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
  
  <!-- 定义自定义脚本 -->
  <amp-script layout="container" script="app-init">
    <script type="text/plain" target="amp-script" id="app-init">
      function initApp() {
        console.log("AMP页面已完全加载就绪！");
        // 在这里编写你的页面初始化逻辑
      }
    </script>
  </amp-script>
</body>

2. 在amp-script中监听DOMContentLoaded #

如果需要更灵活的自定义逻辑，也可以在amp-script内部监听原生的DOMContentLoaded事件，不过要注意必须在AMP允许的脚本环境中执行：

<amp-script layout="container" script="dom-ready">
  <script type="text/plain" target="amp-script" id="dom-ready">
    document.addEventListener('DOMContentLoaded', () => {
      console.log("AMP页面DOM结构已加载完成");
      // 你的初始化代码
    });
  </script>
</amp-script>

二、元素级加载完成的事件绑定 #

对于单个元素（比如图片、AMP组件），可以利用元素自身的加载事件来绑定动作：

1. AMP组件自带的加载事件 #

很多AMP内置组件都有专属的加载完成事件，比如amp-img的load事件：

<amp-img
  src="your-image.jpg"
  width="800"
  height="600"
  layout="responsive"
  on="load:AMP.setState({imageLoaded: true})"
></amp-img>

<!-- 图片加载完成后显示提示 -->
<div [hidden]="!imageLoaded">这张图片已经加载完成啦！</div>

2. 普通元素的加载监听 #

如果是普通HTML元素，同样可以通过amp-script监听它的load事件，或者用amp-intersection-observer组件来检测元素是否加载并进入视口（适合需要元素可见时触发动作的场景）：

<amp-intersection-observer
  on="enter:script:handleElementVisible()"
  layout="nodisplay"
>
  <div id="target-element">我是目标元素</div>
</amp-intersection-observer>

<amp-script layout="container" script="element-handler">
  <script type="text/plain" target="amp-script" id="element-handler">
    function handleElementVisible() {
      const element = document.getElementById('target-element');
      element.style.color = 'blue';
      console.log("目标元素已加载并可见");
    }
  </script>
</amp-script>

三、关键注意事项 #

• AMP不允许使用非规范的内联脚本或外部脚本，所有自定义逻辑必须放在amp-script组件中，或者使用AMP内置的动作系统（比如AMP.setState、visibility.toggle等）。
• 绑定动作时，要遵循AMP的动作语法：on="事件名:动作类型:动作内容"，比如on="amp-onload:script:你的函数()"或者on="load:AMP.setState({xxx: yyy})"。

总的来说，AMP虽然没有完全等同于原生ready的事件，但通过官方提供的amp-onload、组件专属事件，配合amp-script和动作系统，完全可以实现页面/元素加载完成时自动触发动作的需求。

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