0

I have a slider type carousel with two section containers that can slide left and right. In my developed version I have images inside one section container. The problem I'm experiencing is that because my images from the server take a while to load I'm finding that when the user clicks the back button the page is being added to the DOM again (due to ng switch) and is having to reload the images.

My question: Is there a way to use ngif or hide/show with this instead so that the page is simply setting display: none when hidden so that the page containers not currently shown are not removed from the DOM?

  <!--ANIMATE-->
  <div ng-animate="{enter: 'enter', leave: 'leave';}" ng-switch on="par.selection">
    <!--PAGE1-->
    <div class="page page1" ng-switch-when="settings">
        <b>page 1</b><br><br>
        <button  ng-click="par.selection = 'home'; go('front');"  >go page 2</button>
    </div>

    <!--PAGE2-->
    <div class="page page2" ng-switch-when="home">
        <b>page 2</b><br><br>
        <button  ng-click="par.selection = 'settings'; go('back');"  >go page 1</button>
    </div> 
  </div>

Plunkr here: LINK

I made the above example from a blog I visited a phew days ago which I can no longer seem to find but the above example works using the ng-switch method.

Malcr001
  • 8,179
  • 9
  • 44
  • 57
  • Are you absolutely sure the images are reloaded each time? My understanding is that all resourced don't get removed when a node is detached from DOM. I have just added images to your markup and don't see any extra requests each time the page is switched – amakhrov Aug 07 '13 at 18:19
  • If you open the debugger's networks tab, you will see there are no multiple loading. http://plnkr.co/edit/NSdubTeT6wyU5v4W4nXN?p=preview – zs2020 Aug 07 '13 at 18:27
  • I did test this under chrome on my web page and it is loading again. I will have to do more testing to see whats going on. – Malcr001 Aug 07 '13 at 20:31

0 Answers0