2

私は、個人的な画像ギャラリー用の jQuery Isotope ライブラリを使用しています。指示に従い、サンプル コードも使用しましたが、ページの読み込み時にすべての画像がまっすぐ読み込まれるという問題があります。それから数秒後、メイソンはそれらを所定の位置に置きます.

imagesLoaded ライブラリも使用していますが、それらを所定の位置にロードする方法や、ロード中に非表示にする方法などがあるのでしょうか? 長い直線で積み込み、数秒後に所定の位置に積み込むと、ずさんに見えます。

imagesLoaded は画像を非表示にするか、所定の位置にロードすると思いましたが、そうではありません。

私のコードと私が何を意味するかを説明するためのいくつかの写真:

// Isotope Settings
    $(function(){

    var $container = $('#mason');
    $container.imagesLoaded( function(){
        $container.isotope({
            itemSelector : '.box',
            masonry : {
                columnWidth: 270
            }
        });
    });

    $container.infinitescroll({
        navSelector  : '#page_nav',    // selector for the paged navigation 
        nextSelector : '#page_nav a',  // selector for the NEXT link (to page 2)
        itemSelector : '.box',     // selector for all items you'll retrieve
        loading: {
            finishedMsg: 'No more pages to load.',
            img: 'http://i.imgur.com/qkKy8.gif'
        }
    },
    // call Isotope as a callback
        function( newElements ) { 
            var $newElems = $( newElements ).css({ opacity: 0 });
            // ensure that images load before adding to masonry layout
            $newElems.imagesLoaded(function(){
                // show elems now they're ready
                $container.isotope( 'appended', $newElems, true ); 
            });
        }

    );
    });
4

1 に答える 1

1

基本的にやりたいことは、最初は画像を非表示にし、すべてが読み込まれた後にのみ表示することです。これは、CSS と jQuery を使用してかなり簡単に実行できます。

すべての画像をラッピング div に入れる

<div id="wrapper">

    //put your images here
    <img src="awesomeImage" class="image" />

</div>

ラッパーの初期表示を none に設定 (CSS)

#wrapper { display:none; }

ページの読み込みが完了した後にのみ画像を表示する (jQuery)

$(document).ready(function() {
    $("#wrapper").show();
});

これで問題は解決するはずです。

ここで実際の例を見つけることができます: jsFiddle

見る前に、画像がキャッシュ メモリに保存されることに注意してください。したがって、デモンストレーションはおそらく最初に表示したときにのみ機能します。元はかなり大きい複数の画像をそこに配置してから、サイズを縮小しました。通常、これによりロード時間が長くなり (デモンストレーションに必要でした)、実際に動作することがわかります:)

これがあなたを助けることを願っています！

幸運を！

于 2013-07-03T16:01:59.867 に答える