C# 图像源的超宽带延迟加载

C# 图像源的超宽带延迟加载,c#,asynchronous,uwp,async-await,deferred,C#,Asynchronous,Uwp,Async Await,Deferred,作为UWP应用程序,视图模型的集合被实例化并填充到页面的构造函数中。每个项都有一个名为ImageSource的属性,类型为BitmapImage,初始化为新的BitmapImage()。该视图具有绑定到集合的栅格视图。在视图中,为集合的项定义了一个DataTemplate。尤其是DataTemplate,它显示一个图像,其源绑定到项目的属性ImageSource。DataTemplate还处理图像事件,因此在图像仍在加载时,它会显示一个占位符。 页面的已加载事件触发下载所有图像源:

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

        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);
            }
        }  
在这段代码中,
irandomaccesstream
的实例是从慢速提供程序检索的,就像在慢速网络上侦听的
HttpClient

视图上的Image.Source绑定到上述代码的
imageViewModel.ImageSource
。这样,每个图像都需要等待前一个图像结束下载,然后才能开始下载自己的源文件

如果不让所有图像等待其他图像,如何使所有图像立即开始下载

我唯一的想法就是创建一个IRandomAccessStream的延迟实现,但我不知道是否有更好的方法来实现它


谢谢

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

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);
}

从中查看
ImageEx
控件。也许这会有帮助。谢谢。ImageEx具有在加载图像时显示占位符的功能,但似乎无法解决以异步和高效的方式加载图像集的问题。好吧,我的应用程序无需挂起屏幕即可下载50幅大小为300 KB的图像集,并通过延迟实现将其加载到我的
GridView
。试试这个示例应用程序,看看它是否符合您的要求。这里的要点是,它需要10秒来等待流:irandomaccesstream randomAccessStream=wait SlowImageSourceProvider.GetRandomAccessStream(imageViewModel.Id);