How can I preload content and images?

ionic-v1
1

Hello.

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!

2

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,

3

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



4

Going to tryout https://docs.angularjs.org/api/ng/service/$templateCache

5

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

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

6

Unfortunately they’re all stand alone img tags.

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

7

What about this suggestion?

8

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)

4 Likes
9

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.

10

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: http://i.imgur.com/IdypfAI.jpg

1 Like