0

I have a gallery with multiple images.

When clicking on an image it goes to an individual view.

When clicking back button it goes to the gallery but the user experience isn't optimal - all the images are loading again!

To observe the loading go to Chrome Dev Tools and enable Network Throttlingenter image description here

(placeholder images are not the best example as they load almost instantaneous)

I know that in order to preserve state of the controller I can use a service and that's exactly what I'm doing: http://jsbin.com/doneqoruta/edit?html,output

    app.service("files", function() {
      return [
        "350x150",
        "450x150",
        "550x150",
        "650x150",
        "750x150",
        "850x150",
        "350x150",
        "450x150",
        "550x150",
        "650x150",
        "750x150",
        "850x150",
      ];
    })

    app.controller("ListCtrl", function($scope, files) {
      console.log("LIST CTRL");
      $scope.files = files;
    });

Related question: Maintain model of scope when changing between views in AngularJS

Putting the files into $rootScope works for me, as suggested by this answer: https://stackoverflow.com/a/12961220/775359 by Mark Rajcok

$rootScope is a big global variable, which is fine for one-off things, or small apps.

Not-flickering version using $rootScope:

    app.controller("ListCtrl", function($rootScope, files) {
      console.log("LIST CTRL");
      if (!$rootScope.files) {
        $rootScope.files = files;
      }
    });

Is there a better, more angular way?

In Ionic there is $ionicView.enter and by asking this question I'm hoping to expand by knowledge.

UPDATE:

5 seconds video from the localhost: https://youtu.be/HU94T6RtEf8

enter image description here

(when clicking back I'd much rather have a smooth transition, I think the $rootScope might be the way)

Community
  • 1
  • 1
Mars Robertson
  • 12,673
  • 11
  • 68
  • 89
  • Image caching is usually done by browser (based on headers server provides for image requests) and you should not implement it in javascript. You may cache images itself using direct calls from js and converting then images to data urls, but think twice if you really need this. – Petr Averyanov Aug 05 '16 at 08:39
  • I'm very sorry - I should make my question more obvious. Not talking about ```caching browser``` - I'm referring to controller retrieving list of images and even if they are cached the mere fact of running some Angular code and calculating layout takes ```0.1s``` and there is flicker / FUOS effect on the screen I want to avoid. – Mars Robertson Aug 05 '16 at 08:55
  • `$rootScope` approach is ok. The problem is that in this case during navigation user will never get new data. Another way is to create common abstract parent state (You actually want to do it quite always i.e. just for common html template) and put model there. Not very versatile, but fast to implement. Yet another way is to modify your service that return files, so this service will cache something - requires some code, but here you can control every detail. – Petr Averyanov Aug 05 '16 at 09:42

0 Answers0