How can I preload content and images?


I have an issue where on a fresh app install, The images are not loaded. I have to go to a different state and then come back for them to fully load.

Is this a common issue? Is there a way to preload assets on app-launch?

Thanks for your help!

There are some hacks that you can do involving some directives

.directive('imageonload', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('load', function() {
                alert('image is loaded');

 <img ng-src="{{src}}" imageonload />

And preloading them,

So I tried the first directive with no concrete results. Is there any way to “embed” or only show the page when the content is loaded? I’ve played around with ng-cloak and i’m still getting the same issue.

Here’s some SS’s for reference. I feel like this is a widespread issue. O_o

Going to tryout$templateCache

You could do something like this if the images are part of ng-repeat.

ng-show="$index >= (currentSlide-1) && $index <= (currentSlide+1)"

Unfortunately they’re all stand alone img tags.

Going to play around with ng-show on multiple ng-template declarations.

What about this suggestion?

Ended up loading all my templates in my initial index.html file using ng-template for caching. Then when the ui-router calls the templateUrl, it does an ng-include with my ng-template ID.

It seems to work on the iOS Sim, I’ll be doing a build to check performance natively.

Thanks for your help so far though! (again)


Can you share more details on how did you do that? (specially the part related to the ui-router) I will appreciate it very much.

Added a screen shot of the set up. Figured it’d be helpful to see what’s going on.

I took all my content out of my views, added it in home.html (first loaded/default view) and put them in ng-template script tags for caching.

Then in my previous views, just doing an ng-include that matches up with the Template ID (in script tag) I specified in home.html

So ui-router will load my template, which loads the cached view.

Let me know if it’s unclear. Seems to be fixed natively now though.

Full Screen Capture:

1 Like