6

我有一个包含图像列表的 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 and this jQuery Masonry and Ajax Append Items?

我只是想知道插件是否应该在重新加载时等待图像加载？如果是这样，它的语法是什么？

我还计划隐藏块（可见性：隐藏），将它们随机排列，然后砌筑它们，然后将它们淡入。

任何帮助都会很棒，我很难过。非常感谢

4

3 回答 3

0

如果您可以在 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');
});

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

于 2012-09-28T05:03:34.430 回答
0

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

于 2012-09-25T13:27:34.810 回答
0

看起来 Masonry 在图像完全加载之前正在对 DOM 进行操作。使用imagesLoadedMasonry 自带的方法来解决这个问题：

编辑： 以块加载图像，每个块在其图像完全加载时变得可见：

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...');
        });
    }
});
于 2012-09-27T18:00:47.307 回答