我正在使用nativescript + angular创建一个社交媒体应用程序。我不确定这是否只是本机脚本，但是我的图像加载都非常慢-它们是通过不同的URL动态加载的。在下面的链接中，它表示“图像加载缓慢”的意思。有什么我可以做的以使它们加载更快？我有这些想法，但不知道它们是否会起作用
如果有人对我的工作有任何想法，请告诉我。
我正在写的视频称为“ Slow-loading-images-android”（我还在屏幕上显示了一些代码，以便您可以看到那里的内容），另外还有一个带有在iOS上加载图片的问题很奇怪，但我认为，如果我在android上解决此问题，那么它也可能会在iOS上解决问题
答案 0 :(得分：0)
我发现解决此问题的一种方法是使用nativescript-image-cache，但这并不总是很好，因为图像的加载速度仍然很慢。我想出的解决方案是向API添加分页，并使用有角的* ngFor而不是ListView。这样，它们就不会由于ListView而消失，并且用户可以加载所需数量的图像，当他们需要它们时，它不会降低性能，并且在UI方面看起来更好。
如果其他人遇到这样的问题并且不知道该怎么办，则代码如下：
之前（使用ListView-错误）
<ListView [items]="feeds" height="100%">
<ng-template let-item="item" class="feed">
<StackLayout>
<StackLayout>
<GridLayout class="feed-user" columns="50,20,*" (tap)="getUserById(item.userId)">
<Image class="user" [src]="item.mainImage" col="0"></Image>
<Label [text]="item.username" class="username" col="2"></Label>
</GridLayout>
<Image *ngIf="item.isImage" class="feed-image" [src]="item.photoUrl"></Image>
<VideoPlayer *ngIf="!item.isImage" [src]="item.photoUrl" autoplay="true" muted="true"
height="300">
</VideoPlayer>
<GridLayout class="like-sect" columns="*,*" (tap)="like(item)">
<Image class="like" col="0" src="~/app/_assets/ui-images/like.png"></Image>
<Label col="1" class="likes" [text]="item.likes"></Label>
</GridLayout>
<Label class="caption" [text]="item.description"></Label>
</StackLayout>
</StackLayout>
</ng-template>
</ListView>
之后（没有ListView-很好）
<ScrollView [height]="height">
<StackLayout>
<StackLayout *ngFor="let item of feeds">
<StackLayout class="feed-body">
<StackLayout>
<Image *ngIf="item.isImage" class="feed-image" [src]="item.photoUrl"></Image>
<VideoPlayer *ngIf="!item.isImage" [src]="item.photoUrl" autoplay="true" muted="true"
height="300">
</VideoPlayer>
<GridLayout class="like-sect" columns="*,*" (tap)="like(item)">
<Image class="like" col="0" src="~/app/_assets/ui-images/like.png"></Image>
<Label col="1" class="likes" [text]="item.likes"></Label>
</GridLayout>
<StackLayout class="feed-info">
<Label class="caption" [text]="item.description" textWrap="true"></Label>
<Label [text]="item.username + ' | ' + item.dateCreated" (tap)="getUserById(item.userId)"></Label>
</StackLayout>
</StackLayout>
</StackLayout>
<StackLayout class="hr" height="1"></StackLayout>
</StackLayout>
<!-- Instead of this stackLayout below, you should use RadListView and when the user scrolls to the bottom of the screen, it should automatically run the 'nextPage()' function -->
<StackLayout>
<Label *ngIf="!noMoreItems" class="load-more" horizontalAlignment="center" text="Load More.."
(tap)="nextPage()"></Label>
<Label *ngIf="noMoreItems" class="load-more" horizontalAlignment="center"
text="You've viewed everything!"></Label>
</StackLayout>
</StackLayout>
</ScrollView>
这是打字稿文件，以防有人要看它：
import { Component, OnInit, OnDestroy } from '@angular/core';
import { FeedService } from '~/app/_mocks/feed.service';
import { EventService } from '~/app/_services/event.service';
import * as utils from "tns-core-modules/utils/utils";
import * as application from "tns-core-modules/application"
import { registerElement } from "nativescript-angular/element-registry";
import { Video } from 'nativescript-videoplayer';
import { RouterExtensions } from 'nativescript-angular/router';
import { HttpClient } from '@angular/common/http';
import { GoToService } from '~/app/_services/go-to/go-to.service';
import { UserService } from '~/app/_services/user.service';
registerElement("VideoPlayer", () => Video);
import { screen } from "tns-core-modules/platform/platform"
import { environment } from '~/app/environments/environment';
@Component({
selector: 'ns-feed',
templateUrl: './feed.component.html',
styleUrls: ['./feed.component.css']
})
export class FeedComponent implements OnInit {
constructor(private mockFeedService: FeedService, private eventService: EventService
, private router: RouterExtensions, private http: HttpClient, private goTo: GoToService,
private userService: UserService) { }
baseUrl = environment.apiUrl + 'feeds/'
public isAndroid: boolean;
public isIos: boolean;
feeds: any;
loaded = true
today: '18/12/2019'
show: any;
start = 0
end = 7
pageNumber = 1;
userImg = '~/app/_assets/-user.png'
height: number = screen.mainScreen.heightDIPs * 1;
noMoreItems = false;
ngOnInit() {
if (application.ios) {
this.isAndroid = false;
this.isIos = true;
} else if (application.android) {
this.isAndroid = true;
this.isIos = false;
}
this.getFeed();
this.show = 'false'
console.log(this.feeds)
}
getFeed() {
this.baseUrl = environment.apiUrl + 'feeds' + '?pageNumber=' + this.pageNumber
this.http.get(this.baseUrl).subscribe(response => {
const feeds = response;
this.pushToUi(feeds)
// console.log(this.feeds)
if (!feeds) {
console.log('no response')
}
}, error => {
console.log(error);
});
}
pushToUi(items) {
if (items.length == 0) {
console.log('no items')
this.noMoreItems = true;
}
if (this.feeds) {
this.feeds = this.feeds.concat(items)
} else {
this.feeds = items
}
// this.ArrayOptimization()
}
ArrayOptimization() {
// if (this.feeds.length >= 5) {
// console.log('length > 5, length = ' + this.feeds.length)
// }
// THE CODE BELOW IS THE ACTUAL CODE THAT WILL BE USED:
// THIS MAY NOT EVEN BE NECCESSARY, NEED TO DO TESTING
// if (this.feeds.length >= 11) {
// this.feeds.splice(0, 5)
// console.log(this.feeds.length)
// }
}
getUserById(item) {
let newUrl = 'http://10.0.2.2:5000/api/users/' + item
console.log(newUrl)
this.http.get(newUrl).subscribe(response => {
this.userService.singleUser = response;
console.log(this.userService.singleUser)
this.router.navigate(['/single-user/' + item])
}, error => {
console.log(error);
});
}
like(item) {
console.log(item.likes)
item.likes = item.likes + 1
console.log(item.likes)
}
goToUrl(url) {
utils.openUrl('https://' + url);
}
loadVideoIOS() {
this.router.navigate(['/video'])
}
nextPage() {
this.pageNumber = this.pageNumber + 1
this.getFeed()
}
}