javascript - ng-src 与 ng-repeat 内的 ng-if 条件仍然在后台加载图像

Question

我有一个范围对象，其中包含具有 3 个不同图像的对象。我在 div 内显示图像，该图像重复直到范围对象的长度。我有 3 个不同的 img 标签，它们具有 ng-if 属性，并且仅一次显示 3 个图像之一。但是当我检查 chrome 开发者工具的网络部分时，我发现所有图像都是从服务器请求的，即使它们没有显示。如何防止它们加载？

<div class="container" ng-repeat="image in images">
 <img ng-if="zoom == 1" ng-src="{{image.small}} alt="{{image.text}}">
 <img ng-if="zoom == 2" ng-src="{{image.medium}} alt="{{image.text}}">
 <img ng-if="zoom == 3" ng-src="{{image.big}} alt="{{image.text}}">
</div>

如果条件为假，ng-if不应该阻止图像加载吗？我正在使用 angularjs 1.5

Answer 1

根据this GitHub Issue您需要使用 ng-show 而不是 ng-if 和 ng-src 来防止加载不需要的图像。