I've been working on a prototyping tool using Ionic Framework that displays images. These images are app mockups that look exactly like the designer developed them. I associate "hotspots" to each image so that the user can tap a "button" and navigate to a new page or show additional "content".
All in all, this has been a really fun project. From the user's perspective, it feels like they are actually using an app. In reality, they are just tapping on images.
There was one ugly problem. When an image is tapped, Ionic navigates to the next view that simply displays another image. In the moment that the image is loading from file, there was a very brief "flash" of the app's background color. It was very minor, but irritating nonetheless. To solve this, I decided that preloading the images was in order.
Like a real Full Stackoverflow Developer, I went searching on SO for a solution. After not finding one, I resorted to DuckDuckGo. Ben Nadel had an excellent solution for preloading images. Unfortunately, this only works when the server responds with base64 data.
In my case, I have real PNG files that need to be served. After not finding an immediate solution, I thought, "I'll just pre-fetch them with AngularJS and $http. Of course, that doesn't really work as the browser does not cache the images for when the REAL image request gets made.
Finally, I realized I can do this with a service and some HTML trickery.
Here's my final solution:
- Use a resolve in the router to prevent changing to target state until images have been preloaded
- Iterate through an array of image paths, inject them into the DOM, and then delete them. Once all images have loaded, resolve the promise.
It all worked perfectly. Now, when the user taps a hotspot, the app quickly preloads the image before the state change occurs. Since the images are all local, they load blazingly fast. Then, the view transitions and since the image is already cached, there is no "flash".
Here's the image preloading service:
