uwp 延迟加载图像源答案

【问题标题】：uwp deferred loading of image sourcesuwp 延迟加载图像源
【发布时间】：2017-04-01 10:44:21
【问题描述】：

一个 UWP 应用，一组视图模型在页面的构造函数中被实例化和填充。每个项目都有一个名为ImageSource 类型为BitmapImage 的属性，初始化为一个新的BitmapImage()。该视图有一个绑定到集合的网格视图。在视图中，为集合的项目定义了一个DataTemplate。特别是DataTemplate 显示了一个图像，其源绑定到项目的属性ImageSource。 DataTemplate 还处理图像事件，因此它在图像仍在加载时显示占位符。页面的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 的惰性实现，但如果有更好的方法，我会徘徊。

谢谢！

【问题讨论】：

看看ImageEx 控制来自UWP Community Toolkit。也许这会有所帮助。
谢谢。 ImageEx 具有在加载图像时显示占位符的功能，但似乎无法解决以异步和有效方式加载图像集的问题。
好吧，我的应用程序下载了 50 张大小约为 300 KB 的图片，每张图片都没有挂屏，并通过延迟实现将它们加载到我的 GridView 中。试用示例应用程序，看看它是否符合您的要求。
这里的重点是它需要 10 秒来等待流：IRandomAccessStream randomAccessStream = await SlowImageSourceProvider.GetRandomAccessStream(imageViewModel.Id);

标签： c# asynchronous uwp async-await deferred

【解决方案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);
}

【讨论】：