2

ajaxを介してロードする画像がたくさんあります。石工と遅延ロードプラグインを使用して画像を表示しています.1回のajax呼び出しですべての画像をロードすると、問題が発生し、すべての画像が配置されるまでページが動かなくなります。を呼び出して、この 1 つずつ ajax リクエストの直後に、各呼び出しで 10 個の画像を取得し、masonry append を介して追加します。

function getMorePhotos () {
    $.ajax({
            type    : "POST",
            url     : site_url+'controller/ajax_get_photos',
            data    : ,
            complete: function(response)
                    {
                        if (response.responseText != '0' )
                        {
                            getMorePhotos();
                        }                       
                    },
            success : function(response) 
                {
                    if (response == '0' || response == '') {
                        
                    } else {
                        var temp = $(response).get();
                        temp.forEach(function( element, index ) {
                            $item = $(element);
                            $('#allPhoto1').find('ul.ins-view').append($item).masonry( 'appended', $item );
                            $item.find("img.lazy").lazyload({
                                effect : "fadeIn",
                                threshold : 100
                            });

                        });
                        
                    }
                }
        });
}

これは、最初のリクエストが完了した後のメソッド呼び出しです。

問題は次のとおりです。最後のajaxリクエストが完了するまで、最初の画像が連続して点滅します。

これは良い解決策ではないと思います.誰か提案できますか? ここに画像の説明を入力

私は<ul> <li>4つの列を持つ構造を持っています.(画像参照)

4

2 に答える 2

7

問題を解決しました。trueここにありませんでした。

$('#allPhoto1').find('ul.ins-view').append($item).masonry( 'appended', $item, true);

trueに設定すると、追加された画像が下からアニメーション化されます。

私が行ったもう1つのことは、画像の高さを計算し、追加する前に画像のcssに設定することです。これにより、重複が回避されます。ライブデモをすぐに投稿します。

貴重な時間をありがとう:)

于 2013-01-17T05:45:17.157 に答える