Question

我循环遍历我页面上的所有.jplayer类，然后为每个找到的类进行循环，进行ajax调用，返回与播放器关联的每首歌曲的url。我想等到所有ajax调用完成并且所有成功回调都被执行（即，所有jplayer实例都被实例化）然后在我的容器元素上运行同位素。

我最初尝试运行同位素作为我的loadTracks方法的回调，但这不起作用，因为ajax调用在所有玩家实例化之前返回。当同位素试图确定页面的布局时，这会导致问题，因为每个玩家可以有不同的高度。

这是我当前检索播放器曲目的代码：

            function loadTracks(players, callback) {
            players.each(function(i,elem) {
                var playerId = $(this).attr('id'),
                    arr = playerId.split('_'),
                    postId = arr[2];

            $.ajax({
                    url: BaseHref + "api/v1/Post/" + postId + '/PostTracks',
                    dataType: "json",
                    success: function(data) {
                        var cssSelector = {
                            jPlayer: '#jquery_jplayer_' + postId,
                            cssSelectorAncestor: '#jp_container_' + postId
                        }
                        var playlist = [];
                        makePlaylist = (function() {
                            $.each(data.data, function(index,value) {
                                playlist.push({
                                    title: value['Title'],
                                    m4a: value['m4aURL'],
                                    ogg: value['oggURL']
                                });
                            });

                        })();


                        var options = {
                            swfPath: BaseHref + 'themes/simple/javascript/jplayer',
                            supplied: 'm4a, oga',
                            displayTime: 0,
                            addTime: 0,
                            removeTime: 0,
                            shuffleTime: 0,
                            enableRemoveControls: true
                        };
                        var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);

                    }
                });
            });
            callback();
        }

然后我跑：

loadTracks($('.jp-jplayer'), function() {
            $container.imagesLoaded(function() {
                $container.isotope({
                    itemSelector : selector,
                    transformsEnabled: false,
                    visibleStyle: { opacity: 1 },
                    hiddenStyle: { opacity: 0 },
                    resizable: false,
                    masonry: {
                        columnWidth: setColumns($container),
                        gutterWidth: 10
                    },
                    getSortData: {
                        date: function ( $elem ) {
                        return $elem.data('date');  
                        }
                    },
                    sortBy: 'date',
                    sortAscending: false
                });
            });
            if ( $('#overlay').length ) setTimeout(function() { $('#overlay').fadeOut(); }, 1000);
        })

只有在我的$ .each循环中的所有ajax调用都返回并且所有jplayer实例都已通过success方法实例化后，我怎样才能在容器上执行同位素方法？

通过ajax加载媒体后运行同位素回调

0 个答案: