ページ上のすべての .jplayer クラスをループしてから、見つかったクラスごとに、プレーヤーに関連付けられた各曲の URL を返す ajax 呼び出しを行います。すべての ajax 呼び出しが完了し、すべての成功コールバックが実行される (つまり、すべての jplayer インスタンスがインスタンス化される) まで待ってから、コンテナー要素で isotope を実行したいと考えています。
最初に、loadTracks メソッドのコールバックとして isotope を実行しようとしましたが、すべてのプレーヤーがインスタンス化される前に 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 インスタンスが成功メソッドを介してインスタンス化された後にのみ、コンテナーで isotope メソッドを実行するにはどうすればよいですか?