uwp延遲加載圖像源

UWP應用程序，一組視圖模型被實例化並填充到頁面的構造函數中。每個物品都有一個名爲ImageSource的屬性，類型爲BitmapImage，初始化爲新的BitmapImage()。該視圖具有綁定到集合的網格視圖。在該視圖中，爲集合的項目定義DataTemplate。特別是，DataTemplate顯示了一個圖像，其源代碼綁定到該項目的屬性ImageSource。 DataTemplate也處理Image的事件，因此它在圖像仍在加載時顯示一個佔位符。頁面的Loaded事件觸發所有圖像源的下載：uwp延遲加載圖像源

 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的懶惰實現，但我徘徊，如果有更好的方式做到這一點。

謝謝！

來源

2017-04-01 Starnuto di topo

在'從[UWP社區工具包（http://www.uwpcommunitytoolkit.com/en/ ImageEx'控制看一看主/控制/ ImageEx /）。也許這會有所幫助。 – AVK

謝謝。 ImageEx具有在加載圖像時顯示佔位符的功能，但似乎沒有解決以異步且高效的方式加載圖像集的問題。 –

那麼，我的應用程序下載50個大小爲〜300 KB的圖像，每個都作爲集合而不掛起屏幕，並使用惰性實現將它們加載到我的'GridView'中。嘗試示例應用程序，看看它是否適合您的要求。 – AVK

圖像一次只能下載一個圖像，因爲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); 
}

來源

2017-04-01 16:55:12 JSteward

uwp延遲加載圖像源

回答

相關問題