ページの読み込み時にTumblrのポストをランダムに並べ替え

Question

私は、ページの読み込み時にランダムな順序で表示したい写真付きのtumblrを持っています。私はこのトリックを行うコードを少し見つけましたが、問題はページの読み込み時に、最初のいくつかの記事だけが読み込まれることです。残りはスクロールダウン時にロードされますが、これはスクリプトが最初の10-12のポストにのみ適用されることを意味します。彼らは毎回シャッフルされますが、残りはスクロールダウン時に掲示された順序でロードされます。

私の非常に限られたコーディング知識では、他の投稿はDOMにはまだ存在しないと推測しています。パフォーマンス上の理由からスクロールしながらスクリプトで作成されています。しかし、ページにすべての投稿を読み込ませてから、最初から注文をランダムにする方法はありますか？

この

は私が今

var tiles = $(".photo"); 
    for(var i = 0; i < tiles.length; i++){ 
    var target = Math.floor(Math.random() * tiles.length -1) + 1; 
    var target2 = Math.floor(Math.random() * tiles.length -1) +1; 
    tiles.eq(target).before(tiles.eq(target2)); 
    } 

を使用しているスクリプトで、ここではtumblrのページです：http://pieterwouters.tumblr.com/

すべてのヘルプ感謝します！

Answer 1

function shuffle() { 
    var tiles = $(".photo:not('.shuffled')"); 
    for(var i = 0; i < tiles.length; i++){ 
     tiles[i].addClass('shuffled') 
     var target = Math.floor(Math.random() * tiles.length -1) + 1; 
     var target2 = Math.floor(Math.random() * tiles.length -1) +1; 
     tiles.eq(target).before(tiles.eq(target2)); 
    } 
} 

$(document).ready(shuffle); 

これはあなたが心に留めていたものではありませんが、ここではページがリロードされたときにシャッフルすることです。 tumblrがリロード時に関数を実行すると（ひどく）仮定します。その機能が完了したら、shuffle()を再度実行することができます。私はあなたのinitalコードを編集してクラスを追加しました。「シャッフルされた」クラスは、既存のシャッフルされたコンテンツを混ぜ合わせません。