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、 およびこのjQuery Masonry and Ajax Append Items?

リロード時にプラグインが画像のロードを待つべきかどうか疑問に思っていますか? もしそうなら、これの構文は何ですか？

また、ブロックを非表示にして (visibility:hidden)、ランダムな順序にシャッフルしてから、石積みしてからフェードインする予定です。

どんな助けでも素晴らしいでしょう、私は困惑しています。どうもありがとう

4

3 に答える 3

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 に答える
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

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 に答える