Question

嗨，我每个人都使用离子3并且想要为图像设置微调器。我将此应用于具有单个图像的页面，但是在具有多个图像的页面中它具有一个问题。加载图像并img-loaded添加到所有图像display: block;中的img标记时，也会设置未加载的图像。有人可以帮助我吗？这是我的div：

<div *ngIf="user.photoUrl">
                    <img style="width:100%; height:300px;" [src]="user.photoUrl" alt="User image" (load)="loaded = true" [ngClass]="{'img-loaded':loaded}" [hidden]="!loaded">
                    <ion-spinner style="position: relative;display:inline-block;width:100%;text-align:center;height:268px;" ></ion-spinner>
                    <div class="btn">
                        <p>allll</p>
                    </div>
                </div>

Answer 1

更新回答

您正在使用模板变量loaded来确定图片是否已完成加载。但正如您已经知道的那样，他们不能共享相同的变量。

如果你不需要造型，你可以废弃变量。直接设置班级(load)="$event.target.classList.add('img-loaded')"。

否则，将变量转换为数组。我假设你是异步加载这些图像，这是一个给你一个想法的例子：

页面组件.ts文件：

...
@IonicPage()
@Component({
  selector: 'page-your',
  templateUrl: 'your-page.html',
})
export class YourPage {
    /**
     * Loaded is now an array.
     * @type {boolean[]}
     */
    public loaded: boolean[] = [];

    /**
     * Where ever you're getting your users from, it's probably an array as well.
     * @type {User[]}
     */
    public users: User[];

    ...
}

然后在你的模板循环（.html文件）中：

<div *ngFor="let user of users; let i = index">
    <div *ngIf="user.photoUrl">
                <img style="width:100%; height:300px;" [src]="user.photoUrl" alt="User image" (load)="loaded[i] = true" [class.img-loaded]="loaded[i]" [hidden]="!loaded[i]">
                <ion-spinner style="position: relative;display:inline-block;width:100%;text-align:center;height:268px;" ></ion-spinner>
                <div class="btn">
                    <p>allll</p>
                </div>
            </div>
</div>

注意我是如何将[i]添加到loaded变量的引用中的。这会根据用户数组loaded中的索引对let i = index状态编制索引。

旧答案

你的问题不清楚。我想你可能会遇到你的<img (load) />回调未被触发，因为你正在隐藏图像。也许使用隐身，而不是opacity或visibility：

在您的SCSS样式表中（例如.scss文件）。

img {
    opacity: 0;

    // When img also has .img-loaded
    &.img-loaded { 
        opacity: 1;
    }
}

然后，从[hidden]元素中删除[ngClass]和img，并将[hidden]="loaded"添加到ion-spinner。

另外，提示：您可以将[ngClass]="{'img-loaded':loaded}"替换为[class.img-loaded]="loaded"来简化代码。

离子img加载多个图像

1 个答案: