Question

我创建了一个小功能，让用户可以搜索电影。这会从tmdb.org发出JSON请求，返回标题，日期和网址海报等内容。

控制器：

    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>

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

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

解决此问题的最简单方法是延迟控制器中的.then呼叫，直到为用户下载图像，然后进入.finally呼叫。

但我无法找到创造类似内容的方法。有什么提示吗？

Answer 1

试试这个让我知道：

我们的想法是使用一个指令来发出一个渲染完成的事件：

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;
        });
    });

并在html方面：

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

等到在angularjs工厂内加载图像

1 个答案: