Slow load images in ListView

eliseogambaeliseogamba Member ✭✭
edited May 15 in Xamarin.Forms

Hi,

I use the library FFImageLoading in a ListView and when I scroll, the images take time to appear, how can I make them appear immediately?

I did some prubras, if I take a fixed image of drawable it works perfect, so I can get to assume that it can be the Binding that loads the image.``
XML:

<StackLayout>
    <ListView x:Name="TodayListView"
            ItemsSource="{Binding Items}"
            HasUnevenRows="True"
            ItemTapped="Handle_ItemTapped"
            IsPullToRefreshEnabled="True">  
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout  x:Name="layout" IsVisible="{ Binding isVisible }">
                        <forms:CachedImage Source="{Binding photo}" HeightRequest="350" Aspect="AspectFill" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                        </forms:CachedImage>
                        <Label Text="{Binding text}" TextColor="#4D606F" HorizontalOptions="Fill" FontSize="Medium" Font="Bold,20" Margin="10,10,0,0" />
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

Best Answer

  • eliseogambaeliseogamba ✭✭
    edited August 9 Accepted Answer

    The solution was set a static height and width of the container of image, with there achieved what load the all elemtns very fast, later the images loaded progressive while they are downloaded.

    Thanks!

Answers

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭
  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    HeightRequest="350"

    Wow... That's a big image for being inside a ListView.
    What's the actual size of image you're loading? If you're loading a 1920 image and asking the app to scale it every time to 350 you have to expect some delay while it works.

    How many are you loading at one time? At at height of 350 there isn't much point loading more than 2-3 and then paging the data, since that's all that's going to fit on screen anyway. Maybe 5 at a time.

  • eliseogambaeliseogamba Member ✭✭

    The sizes of the images vary, initially load 4 but when it is scrolling it is loading more, on the screen you can see 2

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    The sizes of the images vary,

    Personally I'd test with images that are pre-sized. Confirm the performance under best circumstances where no run-time processing is required.

    Then you may have to do some pre-loading. Load the first first images into a byte[] in advance of they're being needed. Then when you scroll, pre-load the next few that are offscreen.
    IE: When #3 & #4 are on screen pre-load 5, 6 & 7 so they are ready

  • eliseogambaeliseogamba Member ✭✭

    I'm going to try to do the first thing you say.

    Respect to pre-load the images, the library FFImageLoading will not be in charge of saving the images in memory for when you have to re-render them?

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    FFImageLoading will hold the image. That's its job. Meaning it won't have to read from the file system over and over.
    But that doesn't change the need to constantly resize it from 1920 to 350... or whatever the real numbers are.
    You might use that same image in 20 different places. It doesn't keep 20 different versions in memory for your various different size needs and uses.

  • eliseogambaeliseogamba Member ✭✭
    the issue is that although I already have it loaded, when scrolling it takes to appear the image, which I find strange because it is already in memory
  • VovaKamishnikovVovaKamishnikov USMember ✭✭✭
    edited May 16

    Sometimes FFImage works very, very, really very slow. I faced with it just yesterday and was very frustrated.
    I had a big image and tried to display it as a small avatar.
    Try to use DownsampleToViewSize="True" option. It can help

  • eliseogambaeliseogamba Member ✭✭
    edited August 9 Accepted Answer

    The solution was set a static height and width of the container of image, with there achieved what load the all elemtns very fast, later the images loaded progressive while they are downloaded.

    Thanks!

Sign In or Register to comment.