typescript 加载组件后加载背景图像

m3eecexj 于 2023-08-07 发布在 TypeScript

关注(0)|答案(1)|浏览(137)

我正在使用一个有3个子组件的组件（选择/登录/注册），它被称为第一个子组件选择使用淡入动画（此处禁用）。当子组件选项加载时，它显示选项，然后加载背景图像。
Video Of The Problem

<div style="margin: 15%; display: grid; grid-template-columns: 60px auto 60px; grid-template-rows: 60px auto 60px; opacity: 0.8;">
    <div class="Panel-TS"></div>
    <div class="Panel-TC"></div>
    <div class="Panel-TS Panel-Inv"></div>
    <div class="Panel-MS"></div>

    <div class="Panel-MC" style="background-color: #640c78;">
        <div    class=" Link"
                style="display: flex; align-items: center; justify-content: center; color: white;">
            <label type="button">Login</label>
        </div>
        <div    class=" Link"
                style="display: flex; align-items: center; justify-content: center; color: white;">
            <label type="button">Register</label>
        </div>

        <div class="" style="color: white; text-align: center; margin-top: 20px;">
            <a class="Link" type="button">Help</a>
        </div>
    </div>
    
    <div class="Panel-MS Panel-Inv"></div>
    <div class="Panel-BS"></div>
    <div class="Panel-BC"></div>
    <div class="Panel-BS Panel-Inv"></div>
</div>

字符串
我试图使用SCAM架构来工作我的Angular项目，Lazy Load使组件在完全加载所有DOM组件后出现，但两者都不起作用。还尝试使用NgSrc来优化图像加载，但它也不起作用。我是Angular的新手，所以不确定我是否做错了什么，或者这不是正确的方法。

typescript

来源：https://stackoverflow.com/questions/76848037/background-image-loading-after-component-loads

1条答案

按热度按时间

xghobddn1#

您可以尝试“预加载”图像，然后显示组件。

yet:boolean=false;
  ngOnInit(){
    this.preloadImage('assets/background.jpg')
  }

  preloadImage(imgUrl: string) {
    const img = new Image();
    fromEvent(img, 'load')
      .pipe(take(1))
      .subscribe((_) => (this.yet = true));
    img.src = imgUrl;
  }

<div *ngIf="yet" @animation>
   ..your content here..
</div>

字符串
a stackblitz
注意：在stackblitz我放了一个“延迟”，别忘了把它去掉

赞(0）回复(0）举报 2023-08-07

我来回答

typescript 加载组件后加载背景图像

1条答案

相关问题

热门标签

最新问答