2
我寫了Windows Phone 8.1(WinRT的)應用程序。它顯示從互聯網獲取的圖像。圖像緩存8.1
我想這個圖像保存到本地存儲,然後顯示它。 我的意思是說,每次打開應用程序,它會檢查如果圖像是在本地存儲,顯示,並從平行加載互聯網這個形象的新副本,並刷新用戶界面,新的形象。
意味着,直到從互聯網加載圖像的新副本,從本地存儲器獲取的此圖像的緩存副本將充當佔位符。
但問題是我得到的空白UI直到圖像加載從互聯網上,而不是局部的圖像作爲佔位符。
C#
public sealed partial class ProfileView : Page
{
const string PROFILE_PIC_FILE_NAME = "UmangProfilePic.jpg";
public ProfileView()
{
this.InitializeComponent();
this.NavigationCacheMode = NavigationCacheMode.Required;
}
protected override async void OnNavigatedTo(NavigationEventArgs e)
{
//Testing:
//string url = "http://www.nokia.com/sites/default/files/styles/medium/public/media/nokia_white_logo.png"; //small image
string url = "http://anderson.chem.ox.ac.uk/images/group2015.jpg"; //large image
await UmangImageCacheAsync(url);
}
/// <summary>
/// Check if image exists in local storage, load that image to UI control
/// Then, get latest image from internet and storage that image in local storage
/// Then, load that new image from local storage again to UI control
/// </summary>
/// <param name="url"></param>
/// <returns></returns>
private async Task UmangImageCacheAsync(string url)
{
loadingProfilePic.IsActive = true;
//var dispatcher = CoreWindow.GetForCurrentThread().Dispatcher;
//var ignored = dispatcher.RunAsync(CoreDispatcherPriority.Normal, async() =>
//{
//});
var dispatcher = CoreWindow.GetForCurrentThread().Dispatcher;
var ignored = dispatcher.RunAsync(CoreDispatcherPriority.Normal, async() =>
{
if (await FileExists(PROFILE_PIC_FILE_NAME))
{
profilePicImage.Source = await GetLocalImageAsync();
}
});
var result = await GetRemoteImageAsync(url);
if (result is BitmapImage)
{
profilePicImage.Source = result as BitmapImage;
loadingProfilePic.IsActive = false;
}
else
{
loadingProfilePic.IsActive = false;
}
}
private async Task<BitmapImage> GetLocalImageAsync()
// private async Task<bool> GetLocalImageAsync()
{
StorageFolder localFolder = ApplicationData.Current.LocalFolder;
StorageFile file = await localFolder.GetFileAsync(PROFILE_PIC_FILE_NAME);
var image = await FileIO.ReadBufferAsync(file);
Uri uri = new Uri(file.Path);
return new BitmapImage(new Uri(file.Path));
//return true;
}
private static async Task<object> GetRemoteImageAsync(string url)
//private static async Task GetRemoteImageAsync(string url)
{
StorageFolder localFolder = ApplicationData.Current.LocalFolder;
StorageFile file = await localFolder.CreateFileAsync(PROFILE_PIC_FILE_NAME, CreationCollisionOption.ReplaceExisting);
HttpClient client = new HttpClient();
try
{
byte[] responseBytes = await client.GetByteArrayAsync(url);
var stream = await file.OpenAsync(FileAccessMode.ReadWrite);
using (var outputStream = stream.GetOutputStreamAt(0))
{
DataWriter writer = new DataWriter(outputStream);
writer.WriteBytes(responseBytes);
await writer.StoreAsync();
await outputStream.FlushAsync();
}
var image = await FileIO.ReadBufferAsync(file);
Uri uri = new Uri(file.Path);
return new BitmapImage(new Uri(file.Path));
}
catch (Exception _ex)
{
return false;
}
}
public static async Task<bool> FileExists(string fileName)
{
StorageFolder localFolder = ApplicationData.Current.LocalFolder;
try
{
StorageFile file = await localFolder.GetFileAsync(fileName);
}
catch (Exception _fileEx)
{
return false;
}
return true;
}
}
XAML:
<Grid>
<Grid>
<Image
x:Name="profilePicImage"
Width="400"
Height="400" />
<ProgressRing x:Name="loadingProfilePic"
IsActive="False"
IsEnabled="True" >
</ProgressRing>
</Grid>
</Grid>
重現此問題:首先使用 「URL」(小圖)執行應用程序, 然後debugg再次使用第二網址評論第一個網址,直到 從互聯網下載的新圖像,第一個圖像應該作爲 佔位符,但你會看到進步環僅
你總是可以嘗試使用從http://coding4fun.codeplex.com它有一個佔位符的選擇應該是什麼新的內容的互聯網加載過程中所示的SuperImage控制 – Depechie