I'm presenting a ListView of large images in my app. When i say large, I mean about 4mb each(worked horribly also with smaller ones).

This is my template(notice i'm using Nativescript-Vue):

<template>
  <Page class="page">
    <ActionBar class="action-bar">
      <Label class="action-bar-title" text="Hey"></Label>
    </ActionBar>
    <StackLayout>
      <Button @tap="takePicture" text="Take picture"></Button>
      <Button @tap="backup" text="Backup"></Button>
      <Button @tap="openGallery" text="Open gallery"></Button>
      <Button @tap="getAllImages" text="Get all images"></Button>

      <ListView for="image in images">
        <v-template>
          <Image
          class="image"
          :src="image.src"
          />
        </v-template>
      </ListView>
    </StackLayout>
  </Page>
</template> 

I have this CSS for the image:

.image {
  background-color: lightblue;
  height: 200;
  border-radius: 2px;
  border-color: red;
  border-width: 2px;
}

Visually, this is the result:

enter image description here

When i scrolldown the images, it's so laggy it's barely usable. I tried it also on my real device- same issue. Also i tried playing with the layout and css- the problem persists.

What could be the problem?

0 Answers