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):

  <Page class="page">
    <ActionBar class="action-bar">
      <Label class="action-bar-title" text="Hey"></Label>
      <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">

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