图像在集合视图中加载速度非常慢，这也使我的滚动冻结并运行缓慢

Question

问题： 6-7 图像在集合视图中加载速度非常慢。与 CollectionView 绑定需要 6 秒，向下滚动时需要 3 秒加载图像。因此，它也使我的滚动冻结并运行缓慢。

根据我的日志：

[Choreographer] Skipped 41 frames!  The application may be doing too much work on its main thread.
[Choreographer] Skipped 35 frames!  The application may be doing too much work on its main thread.

我已经在谷歌上查找了一个星期了，根据网上的其他帖子，我已经完成了以下操作，但似乎没有任何效果。所以我不确定问题是什么（不像我在这里显示 50 张图像）。

1. 清理 UI 代码
2. 缓存图像（这个插件说它加载图像的速度快了 50%。我什至不想想象没有这个插件它们会加载多长时间:(

我认为问题是：经过一些调试后，我发现这条线花费了不到1秒

var getData = await CarServices.DisplayAllCar();

但这行需要5秒

CarList.AddRange(getData);

之后，当您向下滚动时，我注意到一些图像仍在加载。

所以这告诉我问题不在于我的数据库，而是与 collectionView 的绑定

我在这里创建一个集合：

<CollectionView ItemsSource="{Binding CarList}"
                SelectionMode="Single"
                SelectedItem="{Binding ItemSelectedEvent, Mode=TwoWay}"
                SelectionChangedCommand="{Binding SelectionChangedCommand}"
                ItemSizingStrategy="MeasureAllItems"
                BackgroundColor="Transparent">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Frame CornerRadius="15" HasShadow="True" Padding="0">
                <Grid>
                    <ff:CachedImage  Grid.Row="0"
                        Source="{Binding StoreImagePath}" />
                    <Label Grid.Row="0" Text="{Binding CarColor}"
                           HorizontalTextAlignment="Center"
                           BackgroundColor="Transparent" 
                           TextColor="white" ></Label>
                </Grid>
            </Frame>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

以下代码将绑定到collectionview：

public ObservableRangeCollection<CarModel> CarList { get; set; }

public async  void OnAppearingViewModel(Page sender, EventArgs eventArgs)
{
    LoadDataFromDatabaseToList();
}

//Load Data from database into list 
public async void LoadDataFromDatabaseToList()
{
        CarList.Clear();
        // takes less than 1 sec to run this line
        var getData = await CarServices.DisplayAllCar();
       //takes 5-6 secs
        CarList.AddRange(getData);
}

此代码将：打开相机，拍照，裁剪图像，保存在缓存文件夹中，重新保存在应用程序数据文件夹中，最后将图像路径保存在数据库中（用于从应用程序数据文件夹中打开collectionview中的图像）

new ImageCropper()
{
    PageTitle = "Crop Photo",
    AspectRatioX = 6, // x
    AspectRatioY = 4, // y
    CropShape = ImageCropper.CropShapeType.Rectangle, //Cropt shape
    SelectSourceTitle = "Select source",  // Pop up Title
    TakePhotoTitle = "Take Photo",       // Popup - 1st option 
    PhotoLibraryTitle = "Photo Library", //Popup - 2nd option
    Success = (imagePath) =>
    {
        Device.BeginInvokeOnMainThread(() =>
        {
            //Step#0: auto saves image in: cache folder
            //Step#0: imagePath = get path of image
            //Step#1: re-save same image to app data directory folder
            ReSave_Image_To_AppDataFolder(imagePath); 
        });
    }
}.Show(this);

//Save in database
await CarServices.InsertCar(mycolor, imagePath);

Answer 1

看起来你的插件保存的图像太大了。我也遇到了同样的问题，花了一个月的时间才找到答案。无论如何，我通过重新调整大小来修复它。见下文

 private async void ReSizeImage(string filePath, string filename)
    {
            // re-size image
            var stream1 = await ImageService.Instance.LoadFile(filePath)
                                .DownSample(width: 600).AsPNGStreamAsync();

            // Save re-sized image
            using (var stream2 = new FileStream(filePath, FileMode.Create))
                await stream1.CopyToAsync(stream2);
     
}