コンテンツにイメージを追加して石積みをリロードする

Question

イメージのリストを含むXMLファイルがあります。これらのイメージをコンテナにロードしてから、石積みを適用したいと考えています。

イメージがロードされるまで待つことを試みました。http://masonry.desandro.com/demos/images.html。 各画像が追加されたらリロードを試しました - http://masonry.desandro.com/docs/methods.html#reload

どれも動作していません。

ここは私のコードですが、どこが間違っているのか分かりません。

$('.content').masonry(); 
    var elements = ''; 


    $.ajax({ 
     type: "GET", 
     url: "/galleries/_archive/PhotoGallery.xml", // replace with absolute URL of your gallery's xml file 
     dataType: "xml", 
     success: function(xml) { 
      jQuery(xml).find('img').each(function(i) { 
       var location = "/galleries/_archive/"; // replace with absolute path to the directory that holds your images 
       var url = jQuery(this).attr('src'); 
       var alt = jQuery(this).attr('alt'); 

      elements+= '<div class="image-div"><img class="round'+i+'" src="'+location+''+url+'" alt="'+alt+'"/></div>'; 

     }); 

     $('.content').append(elements).shuffle().masonry('reload'); 
     //$(".content .image-div").shuffle(); 
     } 
    }); 

私はこれを見てきました - jquery, masonry after append complete このjQuery Masonry and Ajax Append Items?

をリロード上のプラグインがロードするために、画像のを待つ必要がある場合、私はちょうど思ったんだけど？もしそうなら、これの構文は何ですか？

私もブロック（可視性：隠された）を非表示にする予定。、ランダムな順序にそれらをシャッフルし、その後でそれらをフェードインし、それらを石工

すべてのヘルプは素晴らしいだろう、私は困惑します。 ありがとう非常にありがとう

Answer 1

jQuery​​関数は、問題を解決するのに役立ちます。

は、私がtotalImageとimageCount変数を作成し、次のコード、

var totalImage = 0, imageCount = 0; 
$.ajax({ 
    type: "GET", 
    url: "/galleries/_archive/PhotoGallery.xml", // replace with absolute URL of your gallery's xml file 
    dataType: "xml", 
    success: function(xml) { 
     totalImage = jQuery(xml).find("img").length; 
     jQuery(xml).find('img').each(function(i) { 
      var location = "/galleries/_archive/"; // replace with absolute path to the directory that holds your images 
      var url = jQuery(this).attr('src'); 
      var alt = jQuery(this).attr('alt'); 

     elements+= '<div class="image-div"><img class="round'+i+'" src="'+location+''+url+'" alt="'+alt+'"/></div>'; 

    }); 

    $('.content').append(elements).shuffle(); 

    $('.image-div img').load(function() { 
     imageCount++; 
     if(totalImage == imageCount){ 
     $('.content').masonry('reload'); 
     } 
}); 

で試してみてください。イメージのロードイベントで、すべてのイメージがロード完了していることを確認しました。もしtotalImageとimageCountが同じであれば、すべてがロード完了したことを意味し、私はmasonry('reload')関数を呼び出しました。

Answer 2

イメージが完全に読み込まれる前に、MasonryがDOM上で動作しているようです。この問題を解決するために石造が付属していますimagesLoadedメソッドを使用します。

編集：

CSS

：そのイメージが完全にロードされたときにチャンクで ロード画像、各チャンクが見えるようになります

.hidden { 
    display: none; 
} 

JavaScript

/* 
* Splits an array into subarrays of length "len". 
* 
* see: http://stackoverflow.com/a/11764168/159570 
*/ 
function chunk(arr, len) { 
    var chunks = []; 
    var i = 0; 
    var n = arr.length; 
    while (i < n) { 
     chunks.push(arr.slice(i, i += len)); 
    } 
    return chunks; 
} 

var chunkSize = 10; // images per chunk 
var $content = $('.content').masonry(); 
$.ajax({ 
    type: "GET", 
    url: "/galleries/_archive/PhotoGallery.xml", 
    dataType: "xml", 
    success: function(xml) { 
     var allImages = $(xml).find('img').get(); 
     var imageArrayChunks = chunk(allImages, chunkSize); 
     $.each(imageArrayChunks, function(i, imageArray) { 
      var elements = ''; 
      $.each(imageArray, function(j, image) { 
       var location = "/galleries/_archive/"; 
       var $image = $(image); 
       var url = $image.attr('src'); 
       var alt = $image.attr('alt'); 
       var index = i*j + j; // original unchunked index 
       elements += '<div class="image-div hidden"><img class="round'+index+'" src="'+location+url+'" alt="'+alt+'"/></div>'; 
      }); 
      $content.append(elements).shuffle(); 
      $content.imagesLoaded(function(images) { 
       $content.masonry('reload'); 
       $(images).parent().removeClass('hidden'); 
      }); 
      console.log('Chunk #'+i+' loaded...'); 
     }); 
    } 
}); 

Answer 3

各要素の高さと幅をXMLファイル内に格納できる場合は、これらのディメンションは、append文で使用できます。そうすることで、画像がブラウザーに読み込まれるのを待たずに、メーソンリーが動作するようになります。このようにして、イメージがロードされた後にブラウザがレイアウトをリフローする必要がなくなり、スムーズな操作（「ジャンク」やバウンス）やページの読み込み速度が向上します。

さらに、実装するのも簡単です（特にXMLファイルをどうにか生成しなければならないと考えると）。ちょうど楽しみのため

var elements = ''; 

$.ajax({ 
    type: "GET", 
    url: "/galleries/_archive/PhotoGallery.xml", // replace with absolute URL of your gallery's xml file 
    dataType: "xml", 
    success: function(xml) { 
     jQuery(xml).find('img').each(function(i) { 
      var location = "/galleries/_archive/"; // replace with absolute path to the directory that holds your images 

      var that= jQuery(this), 
       url = that.attr('src'), 
       alt = that.attr('alt'), 
       h = that.attr('height'), 
       w = that.attr('width'); 

     elements+= '<div class="image-div"><img class="round'+i+'" src="'+location+''+url+'" alt="'+alt+'" height="'+h+'" width="'+w+'"/></div>'; 

    }); 

    $('.content').append(elements).shuffle().masonry(); 
    } 
}); 

---

：理論画像で

CSS

.content img{ 
    opacity:0; 
    -moz-transition:opacity 1s; 
    -webkit-transition:opacity 1s; 
    transition:opacity 1s; 
} 

.content .loadedImg{ 
    opacity:1; 
} 

JS

$('.content').on('load', 'img', function(){ 
    $(this).addClass('loadedImg'); 
}); 

は今一度本当素敵にフェードインしますyはcss3でサポートされているブラウザに完全に読み込まれます。