Prevent ng-include content from pre-loading until toggled to show

Question

Here is my code currently:

<!-- main.html -->
<div ng-controller="MainController">
  <button type="button" ng-click="toggleImgView()">Show Images</button>
  <div ng-show="showImg">
    <ng-include src="'myTemplate.html'"></ng-include>
  </div>
</div>

<!-- myTemplate.html -->
<img ng-repeat="src in images" ng-src="{{ src }}/>

/* part of MainController */
$scope.images = [...];
$scope.showImg = false;
$scope.toggleImgView = function () {
  $scope.showImg = !$scope.showImg;
};

When main.html is loaded, myTemplate.html is default to be hidden because of $scope.showImg = false;, then I can toggle to show it by clicking the Show Images button.

Although myTemplate.html is hidden, it is still loaded to the DOM. It contains a lot of images, which may result in heavy network traffic. Therefore, I don't want load it until the user click the Show Images button to toggle the template.

score 1 · Accepted Answer · answered Nov 23 '15 at 18:48

1

If you use ng-if instead of ng-show the DOM, and the directives (like ng-include in it) won't be inserted and compiled.

answered Nov 23 '15 at 18:48

Ates Goral

137,716
26
137
190

Just changed `ng-show` to `ng-if`, it works perfectly for me. – kitlee Nov 23 '15 at 19:05

score 0 · Answer 2 · answered Nov 23 '15 at 18:48

0

It might be the case what myTemplate dom is loading before angular initialized.

ng-cloak might work here:

https://docs.angularjs.org/api/ng/directive/ngCloak

answered Nov 23 '15 at 18:48

timeiscoffee

468
3
14

score 0 · Answer 3 · answered Nov 23 '15 at 18:50

0

If you wait until the uses clicks the button before downloading the images, the user has to wait.

The idea of loading them asynchronously is so the user does not have to wait.

I would say don't try to prevent them from loading in the background, let them load. Then when the users wants to see them, they will be right there.

answered Nov 23 '15 at 18:50

toddmo

20,682
14
97
107

It is doing same thing now, but I prefer reducing the number of HTTP requests instead of enhancing the user experience, in case, most of the users may not need the `myTemplate.html`, so pre-loading may be wasted. – kitlee Nov 23 '15 at 18:55
Ok, in some cases like yours, that may be a requirement, it's no problem as long as you can clearly articulate why many http requests are undesirable (server load, data charges, for example). – toddmo Nov 23 '15 at 18:57

score 0 · Answer 4 · answered Nov 23 '15 at 18:56

If you set the images array to empty, then load the images into the array when the user clicks 'show images', that should solve that problem.

I agree with toddmo though - if the users have something to look at and the images are loading in the background, that's a better user experience unless you know you're in a limited bandwidth situation and are trying specifically to minimize the network traffic (i.e. edge mobile).

Prevent ng-include content from pre-loading until toggled to show

4 Answers4