Angular 5中如何实现元素的onload事件？

嘿，这问题我之前也碰到过！咱们先搞清楚为啥你的(load)/(onload)绑定没用，再给你几个可行的解决方案：

为啥div的load事件不生效？ #

HTML里的<div>元素本身不支持load事件！这个事件是专门给<img>、<script>、<iframe>这类需要加载外部资源的元素设计的——div只是个容器，它渲染完成时不会触发load事件，所以你绑了也白搭，而click事件是所有可交互元素都支持的，所以能正常工作。

解决方案分两种情况： #

情况1：你要监听的是div背景图的加载完成

看你的div类名是img-circle，大概率是用背景图实现的圆形头像对吧？这种情况下，你得手动创建Image对象来监听图片的加载：

在组件的代码里这么写：

// 假设你的组件里已经有pet和pic变量
ngAfterViewInit() {
  const bgImage = new Image();
  // 这里替换成你的背景图地址，比如pic变量
  bgImage.src = this.pic;
  
  bgImage.onload = () => {
    // 图片加载完成后调用你的函数
    this.imgLoad(this.pet.id, this.pic);
  };
  
  // 别忘了处理加载失败的情况（可选）
  bgImage.onerror = () => {
    console.error(`图片加载失败：${this.pic}`);
  };
}

imgLoad(petId: number, picUrl: string) {
  // 你的业务逻辑
  console.log(`宠物${petId}的图片加载完成：${picUrl}`);
}

情况2：你只是想在div渲染完成后执行函数

如果不需要等资源加载，只是想等div在页面上渲染完成，那用Angular的生命周期钩子AfterViewInit就够了：

1. 先给div加个模板引用变量：

<div class="img-circle" [id]="pet.id" #petCircle></div>

2. 在组件里通过ViewChild获取这个元素，然后在ngAfterViewInit里执行函数：

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  // 你的组件元数据
})
export class YourComponent implements AfterViewInit {
  @ViewChild('petCircle') petCircle!: ElementRef<HTMLDivElement>;
  pet = { id: 1 }; // 示例数据
  pic = 'your-image-url.jpg'; // 示例图片地址

  ngAfterViewInit() {
    // 此时div已经渲染到页面上了
    if (this.petCircle.nativeElement) {
      this.imgLoad(this.pet.id, this.pic);
    }
  }

  imgLoad(petId: number, picUrl: string) {
    // 你的业务逻辑
    console.log(`宠物${petId}的div渲染完成`);
  }
}

额外提醒：如果是循环生成的多个div

如果你的div是用*ngFor循环出来的，那得用ViewChildren来获取所有元素，然后逐个处理：

@ViewChildren('petCircle') petCircles!: QueryList<ElementRef<HTMLDivElement>>;

ngAfterViewInit() {
  this.petCircles.forEach((circle, index) => {
    // 这里可以对应每个pet的数据，比如从循环数组里取
    const pet = this.pets[index];
    const pic = this.pics[index];
    
    // 同样的，如果是背景图就创建Image对象监听，否则直接调用函数
    this.imgLoad(pet.id, pic);
  });
}

内容的提问来源于stack exchange，提问作者Guilherme de Mello