將圖像追加到內容並重新加載砌體

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?

如果重裝我只是想知道應該插件等待圖像加載？如果是這樣的話是什麼語法？

我還計劃隱藏塊（visibility：hidden的），把它們拼湊成一個隨機的順序，然後砌他們，那麼他們消失在

任何幫助將是驚人的，我很爲難。 非常感謝

Answer 1

jQuery​​函數將有助於解決問題。

嘗試用下面的代碼，

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變量。在圖像加載事件我檢查所有圖像加載完成。如果totalImage和imageCount相同意味着全部加載完成，那麼我稱之爲masonry('reload')函數。

Answer 2

在圖像完全加載之前，它看起來像砌體在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文件中存儲每個元素的高度和寬度。您可以在附錄聲明中使用這些維度。這樣做將允許砌體工作而不用等待圖像加載到瀏覽器中。通過這種方式，瀏覽器在加載圖像後不必「重新佈置」佈局，從而獲得更流暢的體驗（更少的「砰砰」或彈跳）以及更快的感知頁面加載。

加上它該死的簡單實現，（特別是考慮到你必須以某種方式生成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支持的瀏覽器中。