UWP images not displayed immediately on page - xaml

Question

I am currently learning UWP and Xaml and have noticed that raised my interest.
When I make a page with a background image of 50kb that contains a grid with 7 other images of each respectively 500bytes, the page does get loaded but in the beginning the images are not yet displayed and will be shown a few seconds after (like 1-1.5second).
Is it possible in a way to tell the frame navigation or navigatedTo to wait opening the page untill all images have been loaded?
Or does do you need to preload the images at startup in a way?
-- Update --
I would like to avoid a progress dialog or such as the images will become essential part of the screen and showing a loading just for that is also a bit weird user experience as you first see a white background and then suddenly see the background appear with the images.
When I leave the 7 images out of the grid the background image is shown almost instant (in a few ms), but including them results all images being shown when all have been loaded leaving a flicker effect.
Furthermore it only happens on the first time they are loaded, when navigating away from the page and then back the images be shown instant afterwards.
Example:
<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>

Answer 1

You could set an indeterminate ProgressBar where your image will be loaded. Something like this:
<BitmapImage ImageOpened="Banner_ImageOpened"/>
<ProgressBar x:Name="BannerProgressBar" IsIndeterminate="True"/>
And in your code behind:
private void Banner_ImageOpened(object sender, RoutedEventArgs e)
{
BannerProgressBar.Visibility = Visibility.Collapsed;
}