UWP图像不立即显示在页

问题描述:

我目前正在学习UWP和Xaml,并且注意到这引起了我的兴趣。UWP图像不立即显示在页

当我用50kb的背景图像制作一个页面时,其中包含一个网格,每个网格包含7个其他图像,每个图像分别有500bytes,但网页确实已加载,但开始时图像尚未显示,并会显示几秒钟之后(如1-1.5秒)。

是否有可能以某种方式告诉框架导航或导航等待打开页面,直到所有图像都已加载? 或者您是否需要在启动时以某种方式预加载图像?

- 更新 -

我想避免一个进度对话框或诸如图像将成为屏幕和显示只是一个装载的重要组成部分也有点怪异的用户体验你首先看到一个白色的背景,然后突然看到背景与图像一起出现。

当我离开网格7张图像时,背景图像几乎立即显示(几毫秒内),但包含它们会导致所有图像在所有图像加载后都会显示,从而产生闪烁效果。 此外,它只发生在第一次加载时,当从页面导航,然后返回图像后立即显示。

例子:


    <Page 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
     <Page.Background> 
      <ImageBrush ImageSource="/Assets/Background/Scherm1.jpg"/> 
     </Page.Background> 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 
      <Image Grid.Column="0" Opacity="0" Source="ms-appx:///Assets/Image1.png"/> 
      <Image Grid.Column="1" Opacity="0" Source="ms-appx:///Assets/Image2.png"/> 
      <Image Grid.Column="2" Opacity="0" Source="ms-appx:///Assets/Image3.png"/> 
      <Image Grid.Column="3" Opacity="0" Source="ms-appx:///Assets/Image4.png"/> 
      <Image Grid.Column="4" Opacity="0" Source="ms-appx:///Assets/Image5.png"/> 
      <Image Grid.Column="5" Opacity="0" Source="ms-appx:///Assets/Image6.png"/> 
      <Image Grid.Column="6" Opacity="0" Source="ms-appx:///Assets/Image7.png"/> 
     </Grid> 
    </Page> 

+0

能否请你告诉你的代码首先 – AymenDaoudi

+0

使导航等待,直到所有的图像加载将导致非常糟糕的用户体验。不要这样做。 – Clemens

+0

但是,显示背景图片和一些小图片的加载进度对于用户体验来说也有点矫枉过正,特别是因为我想让图片对于屏幕来说至关重要。 – WaggaWagga

您可以设置一个不确定的进度您的影像将被载入。事情是这样的:

<BitmapImage ImageOpened="Banner_ImageOpened"/> 
<ProgressBar x:Name="BannerProgressBar" IsIndeterminate="True"/> 

而且在后面的代码:

private void Banner_ImageOpened(object sender, RoutedEventArgs e) 
     { 
      BannerProgressBar.Visibility = Visibility.Collapsed; 
     }