在加載圖像之前，如何使用Angular隱藏圖像？

Question

我正在使用angularjs動態生成圖像。 我想隱藏或顯示每個<img>元素的占位符，直到加載為止。 我可以在html中執行此操作，還是可以在控制器中完成此操作？

<script>
    $http(info)
        .success(function(data){
            var response = angular.fromJson(data);
            $scope.paintings = response;
        })
</script>

<div class="group" ng-repeat="painting in paintings">
    <div class="image">
        <a href="{({ painting.fields.link })}"><img src="{({ painting.fields.link })}" /></a>
        <h3> {({ painting.fields.title })} </h2>
    </div>
</div>

Answer 1

您可以首先隱藏所需的div，然后在加載圖像時顯示它們。 jQuery具有圖像加載功能。

編輯：代碼已更新

<script>
    $http(info)
        .success(function(data){
            var response = angular.fromJson(data);
            $scope.paintings = response;
        })

    // Let's show the div if id is found.
    function showImageDiv (imageDivID) 
    {
        $('#' + imageDivID).show();
    }

</script>

<div class="group" ng-repeat="painting in paintings">
    <!-- Initially set the display = none and add a ID to the div using index value  -->
    <div id="img{{$index}}" class="image" style="display:none">
        <a href="{({ painting.fields.link })}">
             <!-- On Image Load, let's call function by passing the ID of the div -->
             <img src="{({ painting.fields.link })}" onload="showImageDiv(img{{$index}})" />
        </a>
        <h3> {({ painting.fields.title })} </h2>
    </div>
</div>

希望這項工作對您有用。

Answer 2

您是否嘗試過圖片的onload功能？

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
  function runFunction() {
    $http(info)
        .success(function(data){
            var response = angular.fromJson(data);
            $scope.paintings = response;
        })
    }
</script>

<div class="group" ng-repeat="painting in paintings">
    <div class="image">
        <a href="{{ painting.fields.link }}"><img src="{{ painting.fields.link }}" onload="runFunction()" /></a>
        <h3> {{ painting.fields.title }} </h2>
    </div>
</div>