Javascript 等待图像加载到angularjs工厂内

我创建了一个小功能，允许用户搜索电影标题。这是一个来自tmdb.org的JSON请求，返回诸如标题、日期和url海报之类的内容

控制员：

    angular.module('movieSeat')
        .factory('moviesearchFactory', ['$http', '$q', '$rootScope', function ($http, $q, $rootScope) {

            var factory = {};

            function httpPromise(url) {
                var deferred = $q.defer();
                $http({
                    method: 'JSONP',
                    url: url
                })
                    .success(function (data) {
                        deferred.resolve(data.results);
                    })
                    .error(function () {
                        deferred.reject();
                    });
                return deferred.promise;
            }

            factory.getMovies = function (searchquery) {
                return httpPromise('http://api.themoviedb.org/3/' + 'search/movie?api_key=a8f7039633f2065942cd8a28d7cadad4' + '&query=' + encodeURIComponent(searchquery) + '&callback=JSON_CALLBACK')
            }

            return factory;

        }]);

工厂：

    angular.module('movieSeat')
        .controller('moviesearchCtrl', ['$scope', 'moviesearchFactory', function ($scope, moviesearchFactory) {

            $scope.createList = function (searchquery) {
                $scope.loading = true;
                moviesearchFactory.getMovies(searchquery)
                    .then(function (response) {
                        $scope.movies = response;
                    })
                    .finally(function () {
                        $scope.loading = false;
                    });

            }

        }]);

模板：

    <div ng-controller="moviesearchCtrl" id="movieSearch">

        <div class="spinner" ng-show="loading">Loading</div>
        <input ng-model="searchquery" ng-change="createList(searchquery)" ng-model-options="{ debounce: 500 }" />
        {{ search }}

        <ul>
            <li ng-if="movie.poster_path" ng-repeat="movie in movies | orderBy:'-release_date'">
                <span class="title">{{ movie.title }}</span>
                <span class="release_date">{{ movie.release_date }}</span>
                <img ng-src="https://image.tmdb.org/t/p/w300_and_h450_bestv2/{{ movie.poster_path }}" class="poster"/>
            </li>
        </ul>
    </div>

加载
{{search}}


{{movie.title}
{{movie.release_date}

此功能的问题在于spinner类只等待请求的数据。但是仅仅加载一些JSON并不需要很长时间，从浏览器中的api下载图像需要一段时间

这导致了两件事。在浏览器中渲染图像之前，首先移除微调器，因为图像都是异步加载的，所以会产生瀑布效应

解决此问题的最简单方法是延迟

。然后

在控制器中的调用，直到用户下载图像，然后进入

。最后

调用

---

但是我找不到一种方法来创造这样的东西。有什么建议吗？

试试这个，让我知道：

其思想是使用指令发出渲染完成事件：

dashboard.directive('onFinishRender', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit(attr.onFinishRender);
                });
            }
        }
    }
});

在控制器中，保留等待映像加载的事件侦听器：

    $scope.$on('dataLoaded', function(ngRepeatFinishedEvent) {
        // your code to check whether images has loaded
        var promises = [];
        var imageList = $('#my_tenants img');
        for(var i = 0; i < imageList.length; i++) {
            promises.push(imageList[i].on('load', function() {}););
        }
        $q.all(promises).then(function(){
            // all images finished loading now
            $scope.loading = false;
        });
    });

$scope.$on（'dataLoaded'，函数（ngRepeatFinishedEvent）{
//检查图像是否已加载的代码
var承诺=[]；
var imageList=$（“#我的租户img”）；
对于（var i=0；i

在html端：

<div id = "my_tenants">
    <div ng-repeat="tenant in tenants" on-finish-render="dataLoaded">
        // more divs
    </div>
</div>

//更多divs

谢谢你的建议。我觉得它不太管用，但你提出的使用承诺的建议得到了答案。在某个地方找到了一个能满足我需要的东西。所以我改编了>并做了我想做的：）。酷。。在上面的代码中，我正在等待DOM也被更新，以设置图像承诺…：）虽然

var-imageList=$（“#我的租户img”）我没有得到这个部分是否使用jquery选择器填充imageList数组？选择ng repeat中加载数据的所有图像。。。在您的代码中，它看起来是
$（“#movieSearch img”）