uwp 延迟加载图像源

Question

一个 UWP 应用程序，在页面的构造函数中实例化并填充了一组视图模型。每个项目都有一个名为 ImageSource 的 BitmapImage 类型的属性，初始化为一个新的 BitmapImage()。该视图具有绑定到集合的网格视图。在视图中，为集合的项目定义了 DataTemplate。特别是 DataTemplate 显示了一张图片，其来源绑定到项目的属性 ImageSource。 DataTemplate 还处理 Image 的事件，因此它在图像仍在加载时显示一个占位符。页面的Loaded事件触发所有图片来源的下载：

        private async void Page_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            foreach (ImageViewModel imageViewModel in this.imageViewModels)
            {
                IRandomAccessStream randomAccessStream = await SlowImageSourceProvider.GetRandomAccessStream(imageViewModel.Id);
                await imageViewModel.ImageSource.SetSourceAsync(randomAccessStream);
            }
        }

在此代码中，IRandomAccessStream 的实例是从慢速提供程序中检索的，例如 HttpClient 在慢速网络上侦听。

视图上的Image.Source绑定到上面代码的imageViewModel.ImageSource。这样一来，每一张图片都需要等待前一张图片下载结束，才开始下载自己的源码。

如何让所有图片同时开始下载，而不是等待其他图片？

我唯一的想法是创建 IRandomAccessStream 的惰性实现，但我想知道是否有更好的方法。

谢谢！

Answer 1

图像将一次只下载一个，因为 foreach 在两个 await 语句完成之前不会开始另一次迭代。要同时请求所有图像下载并等待它们异步完成，请尝试以下操作：

private async void Page_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e) {
    var setImageTasks = this.imageViewModels.Select(async imageViewModel => {
        var randomAccessStream = await SlowImageSourceProvider.GetRandomAccessStream(imageViewModel.Id);
        await imageViewModel.ImageSource.SetSourceAsync(randomAccessStream);
    }).ToArray();
    await Task.WhenAll(setImageTasks);
}

uwp 延迟加载图像源

uwp deferred loading of image sources

c#

asynchronous

uwp

async-await

deferred