Question

之所以发布此内容，是因为只有在加载背景图像后，我才能在背景图像上找到很好的淡化资源。使用jQuery，我在加载以下代码后淡入背景图像：

    $('.img-col').each(function () {
     var $wrapper = $(this);
     var $img = $wrapper.find('.image');
     var tempImg = new Image();
     tempImg.src = $img.data('src');
     tempImg.onload = function () {
      $img.css('background-image', 'url(' + tempImg.src + ')');
      $wrapper.addClass('loaded');
     };
    })

以下是我到目前为止在Angular 7中所拥有的内容。它似乎可以工作，但我知道代码不正确。 html中对class的双重引用是必要的，但显然不正确。

Component.ts：

export class AppComponent implements OnInit{
 title = 'test-app';
 imageSrc: any;
 invisible: any;
 ngOnInit(){
  this.imageSrc = "https://www.producemarketguide.com/sites/default/files/valencia-oranges_variety-page.png";
 }
 onImageLoad(){
  this.invisible = "visible";
 }
}

Component.html：

<img [ngClass]="invisible" class="invisible" [src]="this.imageSrc" (load)="onImageLoad()" />

Component.css：

.invisible{opacity:0}
.visible{opacity:1; transition: opacity 1.6s ease;}

StackBlitz code

编写此代码的正确方法是什么，或者是更好的使背景图像仅在Angular 7中完全加载后才能淡入的更好方法？

Answer 1

您似乎可以在此处使用角度动画，我已经尝试过了，所以不要太看我，请查看 app.component.ts ， app.component .html 和 app.component.css （在此示例中，位于stackblitz上）。我改变了一点。希望有帮助。

在Angular 7中加载后的Fadein背景图像

1 个答案: