将图像附加到内容并重新加载砌体

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,在追加完成之后的砌体和 这个jQuery Masonry和Ajax追加项目？

我只是想知道重载是否应该插件等待图片加载？如果是这样的话语法是什么？

我还计划隐藏块(可见性:隐藏),将它们随机排列,然后将它们砌成,然后将它们淡入.

任何帮助都会很棒,我很难过.非常感谢

Answer 1

jQuery.load()函数将有助于解决这个问题。

尝试使用以下代码，

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')函数。