Angular 17：如何在@for循环中实现iframe加载优化？

一、正确使用Angular @defer指令（Angular 16+） #

你之前用@defer没生效大概率是写法不对，@defer需要配合触发条件（比如元素进入视口），还要搭配占位容器避免页面跳动。修改@for循环里的代码：

@for (link of youtubeLinks; track $index) {
    <div class="video-container mx-1 mb-2">
      @defer (on viewport) {
        <iframe 
                width="315" 
                height="560" 
                [src]="getVideoSrc(link)" 
                frameborder="0" 
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                allowfullscreen>
        </iframe>
      } @placeholder {
        <!-- 占位容器，保持和iframe一致尺寸 -->
        <div style="width:315px; height:560px; background:#f0f0f0; display:flex; align-items:center; justify-content:center;">
          <span>视频加载中...</span>
        </div>
      }
    </div>
 }

注意：确保你的Angular版本是16及以上，@defer是16版本才引入的特性，版本不够的话先升级框架。

二、手动实现滚动监听懒加载（兼容低版本Angular） #

如果不想依赖@defer，可以自己写滚动监听逻辑，只加载进入视口的视频：

组件模板代码 #

@for (link of youtubeLinks; track $index) {
    <div class="video-container mx-1 mb-2" #videoContainer>
      <iframe 
              width="315" 
              height="560" 
              [src]="link.loaded ? getVideoSrc(link.url) : ''" 
              frameborder="0" 
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
              allowfullscreen>
      </iframe>
      <!-- 初始显示的占位层 -->
      <div class="video-placeholder" *ngIf="!link.loaded">
        <span>视频加载中...</span>
      </div>
    </div>
 }

组件TS代码 #

import { Component, ElementRef, QueryList, ViewChildren, OnInit, OnDestroy } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

interface YoutubeLink {
  url: string;
  loaded: boolean;
}

@Component({
  selector: 'app-youtube-gallery',
  templateUrl: './youtube-gallery.component.html',
  styleUrls: ['./youtube-gallery.component.css']
})
export class YoutubeGalleryComponent implements OnInit, OnDestroy {
  youtubeLinks: YoutubeLink[] = [];
  @ViewChildren('videoContainer') videoContainers!: QueryList<ElementRef>;
  private scrollListener?: () => void;

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit() {
    // 把原始的url数组转换成带loaded状态的数组
    // this.youtubeLinks = 你的原始url数组.map(url => ({ url, loaded: false }));
    
    // 绑定滚动监听
    this.scrollListener = () => this.checkViewport();
    window.addEventListener('scroll', this.scrollListener);
    // 初始检查一次，加载已经在视口的视频
    this.checkViewport();
  }

  checkViewport() {
    this.videoContainers.forEach((containerRef, index) => {
      if (this.youtubeLinks[index].loaded) return;
      const rect = containerRef.nativeElement.getBoundingClientRect();
      // 判断元素是否进入视口
      const isInViewport = rect.top < window.innerHeight && rect.bottom > 0;
      if (isInViewport) {
        this.youtubeLinks[index].loaded = true;
      }
    });
  }

  getVideoSrc(url: string): SafeResourceUrl {
    // 必须用DomSanitizer处理url，避免安全报错
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }

  ngOnDestroy() {
    // 销毁时移除监听，防止内存泄漏
    if (this.scrollListener) {
      window.removeEventListener('scroll', this.scrollListener);
    }
  }
}

配套CSS #

.video-container {
  position: relative;
}
.video-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.video-container iframe {
  position: relative;
  z-index: 2;
}

三、渐进式分批加载 #

如果不想依赖滚动，也可以实现分批加载：比如初始加载前3个，之后用户滚动到页面底部时再加载下一批。

示例TS代码片段 #

ngOnInit() {
  // 初始加载前3个视频
  this.loadBatch(0, 3);
  // 监听滚动到底部事件
  window.addEventListener('scroll', () => {
    // 距离页面底部200px时触发加载
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 200) {
      const loadedCount = this.youtubeLinks.filter(l => l.loaded).length;
      this.loadBatch(loadedCount, 2); // 每次加载2个
    }
  });
}

loadBatch(startIndex: number, count: number) {
  for (let i = startIndex; i < startIndex + count && i < this.youtubeLinks.length; i++) {
    this.youtubeLinks[i].loaded = true;
  }
}

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