How to preload images of my View before it is being rendered?

To have a smooth display of my views, I’d like all my (static) images in the DOM to be fully loaded before the view is being displayed.

If I listen to the $ionicView.beforeEnter event, I can get the list of images within the DOM, and wait for the images to be loaded, but how can I delayed the transition to happen ? Ideally, I’d like the event to be turned into a promise, and only resolve that promise when the images are loaded.

   $_scope.$on('$ionicView.beforeEnter', function(_evt,_data){
      var defer = $q.defer();
        preloadImages().then( function() {
           defer.resolve();
     });
      return defer.promise;
  });

As obviously this does not work (an event does not return anything), I was thinking about redefining the transition function defined in $ionicConfigProvider.transitions.views; so it preloads my images and only starts the transition when done.

Unfortunately, there’s little information on how I could do that, or even if that could be a viable option…

Well, I’m stuck : any pointers are welcome!
D.

4 Likes

Preload then images in the UI-router when resolving the state

Thanks for your reply.

That was my initial thought, but the “UI-Router Resolve” promise happens way before the DOM is being rendered : it is useful if you want to preload resources BEFORE the view is loaded, but it does solve preloading images that are parts of the view.

One thing I’ve been experimenting is popupating the enteringData with a promise object on the $ionicView.beforeEnter event, and then wait for that promise to be resolved in the ionic implementation before executing the transition.

$_scope.$on('$ionicView.beforeEnter', function(_evt,_data){
     var defer = $q.defer();
    preloadImages.then(function()
     {
        defer.resolve();
     });
     _data.promise = defer.promise;
    });

And modify ionic-angular.js

 // 1) get the transition ready and see if it'll animate
            var transitionFn = $ionicConfig.transitions.views[enteringData.transition] || $ionicConfig.transitions.views.none;
            var viewTransition = transitionFn(enteringEle, leavingEle, enteringData.direction, enteringData.shouldAnimate);

          // HACK
          if (enteringData.promise)
          {
            console.log('waiting for promise');
            enteringData.promise.then(function(){
              console.log('promise resolved');
              afterBefore();
            });
          }
          else
              afterBefore();

          function afterBefore()
          { 

      
            if (viewTransition.shouldAnimate) {
              // 2) attach transitionend events (and fallback timer)
              enteringEle.on(TRANSITIONEND_EVENT, transitionComplete);
              enteringEle.data(DATA_FALLBACK_TIMER, $timeout(transitionComplete, 1000));
              $ionicClickBlock.show();
            }

            // 3) stage entering element, opacity 0, no transition duration
            navViewAttr(enteringEle, VIEW_STATUS_STAGED);

            // 4) place the elements in the correct step to begin
            viewTransition.run(0);

            // 5) wait a frame so the styles apply
            $timeout(onReflow, 16);
          }

Seems a bit hacky though…
Still investigating but I’m open to any other ideas

Cheers
D

1 Like

did you see this post? http://www.bennadel.com/blog/2597-preloading-images-in-angularjs-with-promises.htm

Yes, I saw that but it serves a different purpose : it is about lazy loading of images where you display a placeholder until the image is being fetched.

On my case, the goal is different : I want to differ the display of the view until any “static” images are being preloaded. Hence, when the view appears to the user all the elements are already in place.

This is why I’m talking about “static” images (ie: for example, images/icons from the interface) where it does not make sense from a user experience to display a placeholder before they are available. Normally, those images should be loaded very quickly, but nevertheless, it can take a few frames which causes some glitches I’d like to avoid to make my app more native.

Even I could preload manually each of them, I’d rather have something generic so I don’t have to worry about them.

Hope it better clarifies my requirements,
Thanks for your time anwyay,
D.

I am trying to do the same. I am loading a lot of high quality static images that are distributed using a complex grid layout.

I want the user to see the page only after it is completely loaded with crisp clear images and defined layout. As of now, when the page loads or I navigate to next page, the user clearly sees the page being rendered Image being optimized for pixel perfect view.

Is there a way to show the user a wait/loading message while the dom is created and the page is rendered.

Thanks
Nas

I am trying to accomplish the same thing. Anyone had luck with this?

@del7a:
Hey,
Have you acomplished that?
How?

Facing this problem, too. Hard to find any related key word or resources.

1 Like

Is there anybody who found a solution for this issue?
I have a grid with a lot of pictures, I use ionic-image-loader which is very useful for the first loading. Although my images are not of great quality every time the user enters the view with an image there is a bit of a snap. That does not look great.