locked
Most effective way to cache images on a pageControl

    Question

  • When I navigate from one pageControl to another pageControl, the images contained in the pageControl load. When I navigate BACK to a previous pageControl, the images on that page get reloaded. So for a split second, the images cannot be seen.

    Is there a way to store the images in a local cache so when I navigate back to a pageControl, the app first checks if there is a local copy of the image. If there is a local copy, then it uses that image. If there is no local copy then it loads the http version. Furthermore, if the user doesn't navigate back to the pageControl for some time, then the local copies of images that are too old, should be cleared as to not cause memory leaks.

    Is that possible? Is there something built into WinJS that I can utilize to achieve this? Is there a way to check if the image you are about to load is already in the cache so the app can use the cached image rather than reloading the image from the web?


    • Edited by Jaxim Friday, October 17, 2014 4:54 PM added more to question
    Friday, October 17, 2014 1:40 PM

Answers

  • I did some research and found the following URL which details how to figure out if an image is already cached.

    http://stackoverflow.com/questions/7844982/using-image-complete-to-find-if-image-is-cached-on-chrome

    Basically you create a new temporary img tag, place it on your HTML document, set the source to the image URL, and check the image's "completed" property. If the "completed" property is true, then it is cached. If it is false, then it hasn't been loaded yet. The linked page, also recommends checking the image's width/height and the dimensions are greater than zero, then the image is cached. However, in my testing I have found that height and width may be greater than 0 even if it the image hasn't been cached yet.

    Once you determine the image's cached status, then you remove the temporary img tag. (For good measure, before I add the img tag to my document, I set its css so the opacity is 0, and the top/left properties are well off the page. I do this just to make sure there isn't a quick flash of the image - especially on slow machines.)

     
    • Edited by Jaxim Sunday, October 19, 2014 6:50 PM
    • Marked as answer by Jaxim Sunday, October 19, 2014 6:50 PM
    Sunday, October 19, 2014 6:50 PM

All replies

  • WinJS caches images in the local Inetcache folder. You can verify this by running Process Monitor on your app and watching it load the images from that folder.  If you're not seeing this behavior, let me know exactly what you see.

    If your web resource does not have an expiration, the cache will not clear that resource - it will stay until the inetcache is cleared or the app is uninstalled.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Saturday, October 18, 2014 12:06 PM
    Moderator
  • I hide the image and instead display a loading indicator graphic until a loaded even is triggered in loading the image. So for a split second, I see the loading indicator graphic. So it is possible that you're right and the image has been cached, but for a split second, the cached image doesn't tell me that it is loaded.

    If the image is cached, then I can skip hiding the image and skip displaying the loading indicator graphic. However, if the image is not cached, then I do not want to display the image because a small square appears until the image has loaded.

    So the questions is: how can I call the cache to see if the image is present in the there? 

    Sunday, October 19, 2014 2:23 AM
  • I did some research and found the following URL which details how to figure out if an image is already cached.

    http://stackoverflow.com/questions/7844982/using-image-complete-to-find-if-image-is-cached-on-chrome

    Basically you create a new temporary img tag, place it on your HTML document, set the source to the image URL, and check the image's "completed" property. If the "completed" property is true, then it is cached. If it is false, then it hasn't been loaded yet. The linked page, also recommends checking the image's width/height and the dimensions are greater than zero, then the image is cached. However, in my testing I have found that height and width may be greater than 0 even if it the image hasn't been cached yet.

    Once you determine the image's cached status, then you remove the temporary img tag. (For good measure, before I add the img tag to my document, I set its css so the opacity is 0, and the top/left properties are well off the page. I do this just to make sure there isn't a quick flash of the image - especially on slow machines.)

     
    • Edited by Jaxim Sunday, October 19, 2014 6:50 PM
    • Marked as answer by Jaxim Sunday, October 19, 2014 6:50 PM
    Sunday, October 19, 2014 6:50 PM