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

Answer 2

在图像完全加载之前，看起来Masonry正在对DOM进行操作。使用Masonry附带的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语句中使用这些维度。这样做可以让砌体无需等待图像加载到浏览器中。这样浏览器就不必在加载图像后“重排”布局，从而产生更流畅的体验（减少“janking”或弹跳）以及更快的感知页面加载。

另外它很容易实现，（特别是考虑到你必须以某种方式生成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');
});

理论上，一旦在css3支持的浏览器中完全加载图像，它们现在就会变得非常漂亮。

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

3 个答案: