3

作業中のサイトでIsotopeJSを使用しています。StraightAcrossレイアウトオプションを使用しています。問題は、すべての画像の読み込みが開始されてから、Isotopeが起動してレイアウトを作成することです。私はドキュメントに従っていて、両方の方法を実装しました:

http://isotope.metafizzy.co/docs/help.html#imagesloaded_plugin

私のコード:

 var $container = $('#container');
    $container.imagesLoaded(function(){
        $('#container').isotope({ 
        layoutMode : 'straightAcross'
        });
    });

私も試しました:

$(window).load(function() {
            $('#container').isotope({ 
            layoutMode : 'straightAcross'
    });

$(window).load(function() {
     var $container = $('#container');
        $container.imagesLoaded(function(){
            $('#container').isotope({ 
            layoutMode : 'straightAcross'
            });
        });
    });

ストレートアクロスレイアウトを使用しているので、ジャンプはかなり耳障りです。どんな助けでもいただければ幸いです。

編集追加された開発リンク:

http://66.214.147.58/tracey_dev/

編集2

この問題のビデオを作成しました。

http://vimeo.com/50708647

最初は、コンテナよりも大きい画像が積み重ねられて読み込まれ始めます。それらがロードされると、Isotopeが起動してレイアウトを作成し、画像をコンテナに合わせてサイズ変更し、水平に配置します。

このサイトはサイズ変更可能になるため、画像は品質を維持するために大きな形式で保存されます。サーバーから大きな画像をロードするように画像を更新しました。

Isotopeスクリプトが起動するまで画像を表示しないようにします。

編集3

OK、imagesLoadedが何をするのか理解できたと思います。画像をプリロードして、完了するまで非表示にしてから、Isotopeをトリガーします。これは、私が行っている印象を受けたものです。この問題を回避するために私がしたことは、ドキュメントの準備ができたときにhide()を追加し、次にwindow.loadにshow()を追加することです。これは私のファイルサイズと読み込みの問題を解決していません(私が進むにつれてそれを解決しません)が、ジャンプの問題は解決しました。ご入力いただきありがとうございます。これが機能する私のコードです。

<!-- Hides the container for loading -->
<script>
    $(document).ready(function() {
            $('#container').hide();
});
</script>

<!-- Isotope Script -->
<script>

$(window).load(function() {
    // set panels equal to window size
    setSectionSize();

    $(window).resize(function(){
        setSectionSize();
    });

     // function to set panels to window size
    function setSectionSize(){
        var windowHeight = $(window).height()-170;

        //resize section containing image
        $('#container').css({'height':windowHeight+'px'});         
        };

        /* Load Isotope */
        var $container = $('#container');

        $container.imagesLoaded(function(){
        $container.show();
        $container.isotope({ 
        layoutMode : 'straightAcross'

        });
         });
                 });
</script>

ありがとうございました。

4

0 に答える 0