Ffimageloading: How to use Preload() feature in a correct way?

[ManhDucIT]

Dear sir,

I have a specific case is for all times, the image must be displayed immediately even the first time. So I tried using:

// In this example urlToImage will be added to cache without being assigned to any target.
ImageService.Instance.LoadFile([PATH_TO_IMAGE]).Preload();

But it still slowly appear on the first time. The image I used has 6MB in size and ran in low performance device. It takes about 6 seconds to display the image for the first time. However, from the second times onward, it is displayed instantly (without any delay).

Could you please give me a detail sample code for this case so that I can resolve my issue as soon as possible?

[daniel-luberda]

Hi @ManhDucIT

Preload should work fine for such scenarios. You may also try PreloadAsync and await it as Preload is just adding image loading operation to queue.

Could you make a repo?

[ManhDucIT]

Dear sir,
I have created the sample repo on github and invited you:
https://github.com/ManhDucIT/FFImageLoadingPreload

https://github.com/ManhDucIT/FFImageLoadingPreload/invitations

Could you please help me write some code to demonstrate the Preload feature?

I hope to hear from you soon.

Best regards,

On Fri, Apr 26, 2019 at 4:49 PM Daniel Luberda [e-mail]
wrote:

Preload should work fine for such scenarios. You may also try PreloadAsync
and await it as Preload is just adding image loading operation to queue.

Could you make a repo?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/luberda-molinet/FFImageLoading/issues/1253#issuecomment-486999194,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AF5B6FLO2H3R4YBU6ZL7LPLPSLFZVANCNFSM4HIQ5KIA
.

--
Thanks and Best Regards,

Dang Manh Duc
Technical Leader (Mobile team - Fsoft Company)

Mobile: [phone]
Skype: Đặng Mạnh Đức

[daniel-luberda]

This is your problem: DownsampleToViewSize="true"

1. Image are cached in memory with specific keys eg: ball.jpg
2. If you use DownsampleToViewSize or DownsampleHeight or DownsampleWidth option, cache key would be automatically modified like this: ball.jpg;size={width}x{height};dip=true
3. If you Preload an image without downsampling, you're preloading just ball.jpg

If you want to preload correctly you have three options:

• disable downsampling on image loading
• preload with correct parameters: ImageService.Instance.LoadCompiledResource('ball.jpg').Downsample(width: x, height: x).Preload()
• use custom cacheKey (see wiki docs)

BTW: you can enable verbose logging to see cache keys while debugging (via custom config)

[adrianknight89]

I have run into a similar problem in the past where preloading did NOT preload the image and my placeholder image was still visible upon displaying the list view. I have not tried async/await before though.

@daniel-luberda Correct me if I'm wrong, but are you saying Preload queues up the operation whereas PreloadAsync runs it immediately when awaited?

Second, the documentation for PreloadAsync says it can throw exceptions. Does Preload throw them as well?

[daniel-luberda]

Both Preload / PreloadAsync are queued. First one is fire&forget (doesn't throw exceptions) and second one returns a task and throws all exceptions (important)

[ManhDucIT]

Dear sir,

I have tried your suggestion but not successful. The image was still slowly
displayed on the first time.

It seems that I got something wrong.

Could you please help me check and write your sample implementation into
the project: https://github.com/ManhDucIT/FFImageLoadingPreload?

Many thanks,

On Sat, Apr 27, 2019 at 9:25 PM Daniel Luberda [e-mail]
wrote:

Both Preload / PreloadAsync are queued. First one is fire&forget (doesn't
throw exceptions) and second one is a tak which throws all exceptions
(important)

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/luberda-molinet/FFImageLoading/issues/1253#issuecomment-487290326,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AF5B6FM5Q3CKRFWL7D4GLKTPSRO5HANCNFSM4HIQ5KIA
.

--
Thanks and Best Regards,

Dang Manh Duc
Technical Leader (Mobile team - Fsoft Company)

Mobile: [phone]
Skype: Đặng Mạnh Đức

[ManhDucIT]

Have a nice day, sir

Do you have any update to my concern? Honestly, it is extremely important
point for me to get our project continuing?

Could you please help me try this?

Best regards,
On Apr 27, 2019 23:36, "Đặng Mạnh Đức" [e-mail] wrote:

Dear sir,

I have tried your suggestion but not successful. The image was still
slowly displayed on the first time.

It seems that I got something wrong.

Could you please help me check and write your sample implementation into
the project: https://github.com/ManhDucIT/FFImageLoadingPreload?

Many thanks,

On Sat, Apr 27, 2019 at 9:25 PM Daniel Luberda [e-mail]
wrote:

Both Preload / PreloadAsync are queued. First one is fire&forget
(doesn't throw exceptions) and second one is a tak which throws all
exceptions (important)

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/luberda-molinet/FFImageLoading/issues/1253#issuecomment-487290326,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AF5B6FM5Q3CKRFWL7D4GLKTPSRO5HANCNFSM4HIQ5KIA
.

--
Thanks and Best Regards,

Dang Manh Duc
Technical Leader (Mobile team - Fsoft Company)

Mobile: [phone]
Skype: Đặng Mạnh Đức

[daniel-luberda]

First option

Set preload cache key to _filePath, so when CachedImage uses _filePath file source, it will use preloaded image (as both would have the same cache key).

```C#
ImageService.Instance.LoadFile(_filePath)
.DownSample((int)Application.Current.MainPage.Width, (int)Application.Current.MainPage.Height)
.CacheKey(_filePath)
.Preload();

With this both keys (preload and cachedImage) will look like this: 
```C#
$"{_filePath}"

and cachedImage will use preloaded image. (as both would have the same cache key)

Second option

```C#
image.DownsampleWidth = (int)Application.Current.MainPage.Width;
image.DownsampleHeight = (int)Application.Current.MainPage.HeightRequest;
image.Source = ImageSource.FromFile(filePath);

With this both keys (preload and cachedImage) will look like this: 
```C#
$"{_filePath};size={(int)Application.Current.MainPage.Width;}x{(int)Application.Current.MainPage.HeightRequest};dip=true"

and cachedImage will use preloaded image. (as both would have the same cache key)

[daniel-luberda]

Also take note that properties like Application.Current.MainPage.Width can change, so the cache key could also change and preloaded image would not be used! It's better to set some fixed value.

[ManhDucIT]

Dear sir,
I have already tried both of your suggestions before, but it wasn't work.
Even that I enabled verbose logging, then taking the value of cached key,
then hard-code this key to preload feature, it still did not work.

Did you try this directly into my source code to see the real result?

Best Regards,

On Tue, Apr 30, 2019 at 4:52 PM Daniel Luberda [e-mail]
wrote:

Also take note that properties like Application.Current.MainPage.Width
can change, so the cache key could also change and preloaded image would
not be used! It's better to set some fixed value.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/luberda-molinet/FFImageLoading/issues/1253#issuecomment-487892846,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AF5B6FKMMQULA6KOAXEM7M3PTAJG5ANCNFSM4HIQ5KIA
.

--
Thanks and Best Regards,

Dang Manh Duc
Technical Leader (Mobile team - Fsoft Company)

Mobile: [phone]
Skype: Đặng Mạnh Đức

[daniel-luberda]

Updated. Output:

Preloading finished! Key: sample.jpg;300x0
[MEMORY_CACHE] Cache hit from reuse pool for key: sample.jpg;300x0
[MEMORY_CACHE] EntryDisplayed: sample.jpg;300x0
Image loaded from cache: sample.jpg;300x0
MemoryCache

[ManhDucIT]

Yes yes, sir
Previously, I had this output. But seeing directly onto the screen, I still
see the image is slowly displayed on the first time.

Did you check this ?

On Tue, Apr 30, 2019 at 8:40 PM Daniel Luberda [e-mail]
wrote:

Updated. Output:

Preloading finished! Key: sample.jpg;300x0
[MEMORY_CACHE] Cache hit from reuse pool for key: sample.jpg;300x0
[MEMORY_CACHE] EntryDisplayed: sample.jpg;300x0
Image loaded from cache: sample.jpg;300x0
MemoryCache

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/luberda-molinet/FFImageLoading/issues/1253#issuecomment-487956203,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AF5B6FK3WCIZJUZ7SHQX6WDPTBD4FANCNFSM4HIQ5KIA
.

--
Thanks and Best Regards,

Dang Manh Duc
Technical Leader (Mobile team - Fsoft Company)

Mobile: [phone]
Skype: Đặng Mạnh Đức

[daniel-luberda]

It's loaded from memory cache as the last line states. Slowness is probably because you turned on verbose logging.

[ManhDucIT]

Please wait for some seconds, I will try your 2 proposed solutions right
now, and give you feedback instantly, sir ! :)

On Tue, Apr 30, 2019 at 9:30 PM Daniel Luberda [e-mail]
wrote:

It's loaded from memory cache as the last line states. Slowness is
probably because you turned on verbose logging.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/luberda-molinet/FFImageLoading/issues/1253#issuecomment-487975234,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AF5B6FLAVWTGUFVJZOAYHYTPTBJZVANCNFSM4HIQ5KIA
.

--
Thanks and Best Regards,

Dang Manh Duc
Technical Leader (Mobile team - Fsoft Company)

Mobile: [phone]
Skype: Đặng Mạnh Đức

[daniel-luberda]

I already changed your sample app, check on: https://github.com/ManhDucIT/FFImageLoadingPreload

[ManhDucIT]

Dear sir,

I have just tried your modification and it is ok, BUT as my original
concern, the image I used is a large image (ball.jpg - 2.4MB). It was still
slowly displayed on the first time.
And how do I make the image displayed full screen?

Regards,

On Tue, Apr 30, 2019 at 9:33 PM Daniel Luberda [e-mail]
wrote:

I already changed your sample app, check on:
https://github.com/ManhDucIT/FFImageLoadingPreload

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/luberda-molinet/FFImageLoading/issues/1253#issuecomment-487976318,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AF5B6FISHWXOKP2Y6SHY2ODPTBKDXANCNFSM4HIQ5KIA
.

--
Thanks and Best Regards,

Dang Manh Duc
Technical Leader (Mobile team - Fsoft Company)

Mobile: [phone]
Skype: Đặng Mạnh Đức

[ManhDucIT]

For more information, I have commit the code into git:
https://github.com/ManhDucIT/FFImageLoadingPreload

On Tue, Apr 30, 2019 at 10:29 PM Đặng Mạnh Đức [e-mail] wrote:

Dear sir,

I have just tried your modification and it is ok, BUT as my original
concern, the image I used is a large image (ball.jpg - 2.4MB). It was still
slowly displayed on the first time.
And how do I make the image displayed full screen?

Regards,

On Tue, Apr 30, 2019 at 9:33 PM Daniel Luberda [e-mail]
wrote:

I already changed your sample app, check on:
https://github.com/ManhDucIT/FFImageLoadingPreload

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/luberda-molinet/FFImageLoading/issues/1253#issuecomment-487976318,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AF5B6FISHWXOKP2Y6SHY2ODPTBKDXANCNFSM4HIQ5KIA
.

--
Thanks and Best Regards,

Dang Manh Duc
Technical Leader (Mobile team - Fsoft Company)

Mobile: [phone]
Skype: Đặng Mạnh Đức

--
Thanks and Best Regards,

Dang Manh Duc
Technical Leader (Mobile team - Fsoft Company)

Mobile: [phone]
Skype: Đặng Mạnh Đức

[ManhDucIT]

I can make it full screen by AspectFill, but the image still display slowly
on the first time.

On Tue, Apr 30, 2019 at 10:29 PM Đặng Mạnh Đức [e-mail] wrote:

For more information, I have commit the code into git:
https://github.com/ManhDucIT/FFImageLoadingPreload

On Tue, Apr 30, 2019 at 10:29 PM Đặng Mạnh Đức [e-mail]
wrote:

Dear sir,

I have just tried your modification and it is ok, BUT as my original
concern, the image I used is a large image (ball.jpg - 2.4MB). It was still
slowly displayed on the first time.
And how do I make the image displayed full screen?

Regards,

On Tue, Apr 30, 2019 at 9:33 PM Daniel Luberda [e-mail]
wrote:

I already changed your sample app, check on:
https://github.com/ManhDucIT/FFImageLoadingPreload

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/luberda-molinet/FFImageLoading/issues/1253#issuecomment-487976318,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AF5B6FISHWXOKP2Y6SHY2ODPTBKDXANCNFSM4HIQ5KIA
.

--
Thanks and Best Regards,

Dang Manh Duc
Technical Leader (Mobile team - Fsoft Company)

Mobile: [phone]
Skype: Đặng Mạnh Đức

--
Thanks and Best Regards,

Dang Manh Duc
Technical Leader (Mobile team - Fsoft Company)

Mobile: [phone]
Skype: Đặng Mạnh Đức

--
Thanks and Best Regards,

Dang Manh Duc
Technical Leader (Mobile team - Fsoft Company)

Mobile: [phone]
Skype: Đặng Mạnh Đức

[ManhDucIT]

Oh, it seems ok now, I got it work, but I need more test.
I will inform you latter.

After all, I would like to say thank you very very much for your dedicated
support.

Best regards,

On Tue, Apr 30, 2019 at 10:33 PM Đặng Mạnh Đức [e-mail] wrote:

I can make it full screen by AspectFill, but the image still display
slowly on the first time.

On Tue, Apr 30, 2019 at 10:29 PM Đặng Mạnh Đức [e-mail]
wrote:

For more information, I have commit the code into git:
https://github.com/ManhDucIT/FFImageLoadingPreload

On Tue, Apr 30, 2019 at 10:29 PM Đặng Mạnh Đức [e-mail]
wrote:

Dear sir,

I have just tried your modification and it is ok, BUT as my original
concern, the image I used is a large image (ball.jpg - 2.4MB). It was still
slowly displayed on the first time.
And how do I make the image displayed full screen?

Regards,

On Tue, Apr 30, 2019 at 9:33 PM Daniel Luberda [e-mail]
wrote:

I already changed your sample app, check on:
https://github.com/ManhDucIT/FFImageLoadingPreload

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/luberda-molinet/FFImageLoading/issues/1253#issuecomment-487976318,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AF5B6FISHWXOKP2Y6SHY2ODPTBKDXANCNFSM4HIQ5KIA
.

--
Thanks and Best Regards,

Dang Manh Duc
Technical Leader (Mobile team - Fsoft Company)

Mobile: [phone]
Skype: Đặng Mạnh Đức

--
Thanks and Best Regards,

Dang Manh Duc
Technical Leader (Mobile team - Fsoft Company)

Mobile: [phone]
Skype: Đặng Mạnh Đức

--
Thanks and Best Regards,

Dang Manh Duc
Technical Leader (Mobile team - Fsoft Company)

Mobile: [phone]
Skype: Đặng Mạnh Đức

--
Thanks and Best Regards,

Dang Manh Duc
Technical Leader (Mobile team - Fsoft Company)

Mobile: [phone]
Skype: Đặng Mạnh Đức

[ManhDucIT]

I have a small question that: With the code I have just pushed into git,
why the image was not showing anymore?

Please take a look at the code:
https://github.com/ManhDucIT/FFImageLoadingPreload

I just remove downsample value.

On Tue, Apr 30, 2019 at 10:41 PM Đặng Mạnh Đức [e-mail] wrote:

Oh, it seems ok now, I got it work, but I need more test.
I will inform you latter.

After all, I would like to say thank you very very much for your dedicated
support.

Best regards,

On Tue, Apr 30, 2019 at 10:33 PM Đặng Mạnh Đức [e-mail]
wrote:

I can make it full screen by AspectFill, but the image still display
slowly on the first time.

On Tue, Apr 30, 2019 at 10:29 PM Đặng Mạnh Đức [e-mail]
wrote:

For more information, I have commit the code into git:
https://github.com/ManhDucIT/FFImageLoadingPreload

On Tue, Apr 30, 2019 at 10:29 PM Đặng Mạnh Đức [e-mail]
wrote:

Dear sir,

I have just tried your modification and it is ok, BUT as my original
concern, the image I used is a large image (ball.jpg - 2.4MB). It was still
slowly displayed on the first time.
And how do I make the image displayed full screen?

Regards,

On Tue, Apr 30, 2019 at 9:33 PM Daniel Luberda <
[email protected]> wrote:

I already changed your sample app, check on:
https://github.com/ManhDucIT/FFImageLoadingPreload

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/luberda-molinet/FFImageLoading/issues/1253#issuecomment-487976318,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AF5B6FISHWXOKP2Y6SHY2ODPTBKDXANCNFSM4HIQ5KIA
.

--
Thanks and Best Regards,

Dang Manh Duc
Technical Leader (Mobile team - Fsoft Company)

Mobile: [phone]
Skype: Đặng Mạnh Đức

--
Thanks and Best Regards,

Dang Manh Duc
Technical Leader (Mobile team - Fsoft Company)

Mobile: [phone]
Skype: Đặng Mạnh Đức

--
Thanks and Best Regards,

Dang Manh Duc
Technical Leader (Mobile team - Fsoft Company)

Mobile: [phone]
Skype: Đặng Mạnh Đức

--
Thanks and Best Regards,

Dang Manh Duc
Technical Leader (Mobile team - Fsoft Company)

Mobile: [phone]
Skype: Đặng Mạnh Đức

--
Thanks and Best Regards,

Dang Manh Duc
Technical Leader (Mobile team - Fsoft Company)

Mobile: [phone]
Skype: Đặng Mạnh Đức

[daniel-luberda]

It's rather because you removed this:

        VerticalOptions="FillAndExpand"     
         HorizontalOptions="FillAndExpand"

[ManhDucIT]

Dear author,

We are using Xamarin Forms FFImageLoading in our big application, and we
are facing a very critical issue in Android platform as bellow:
During usage of the application, sometimes we get an unhandled exception: *
*Java.Lang.Exception: FFImageLoading.finalize() timeout after 10 seconds
(details in attachef image)
Noted that all image used inside our application are storage in app
internal memory, but not in drawable folder of Droid project.

Have you ever faced this problem before?
Could you please share me the root cause and possible solution for this
issue?

Many thanks,