0

このリンクの画像を見てください

同じ Mosaic Flow プラグインを使用して同様のページを作成しています。私のページと上記のサンプル ページの唯一の違いは、AJAX を介して画像を取得していることです。

問題: ajax 呼び出しの後、画像が表示されません。ブラウザウィンドウのサイズを変更したり、ズームイン/ズームアウトしたりしたときにのみ表示され始めます。ajax 呼び出しは正常に機能し、画像が取得されて正しいコンテナー要素に追加され、モザイク フローが正しく実行されます (非表示部分を除く)。ブラウザウィンドウのサイズを変更すると、プラグインは問題なく動作し、提供したリンクの例のように、必要に応じて列のサイズを変更して作成します

ここに私のajaxコードがあります：

    var container = jQuery( "#container" );
    jQuery( "button#submit" ).on( "click", function(){
        jQuery.ajax({
            url: "/ajax/ajax_getimages.php",
            success: function( data ){
                container.html( data );
            },
            complete: function(){
                jQuery( "#image-container" ).mosaicflow( { 
                    itemSelector: ".item", 
                    minItemWidth: 300 
                });
            }
        });

        return false;
    });

この目に見えない動作の原因は何ですか? ajax を使用して画像を取得する場合にのみ発生するのはなぜですか? また、これを修正するにはどうすればよいですか?

4

1 に答える 1

1

これを試してみてください。私の場合は役に立ちました:)。

var container = jQuery( "#container" );
jQuery( "button#submit" ).on( "click", function(){
    jQuery.ajax({
        url: "/ajax/ajax_getimages.php",
        success: function( data ){
            container.html( data );
        },
        complete: function(){
            var mosaic = jQuery( "#image-container" ).mosaicflow( { 
                itemSelector: ".item", 
                minItemWidth: 300 
            });
           mosaic.mosaicflow('refill'); 
        }
    });

    return false;
});
于 2013-11-17T11:44:56.880 に答える