7

私のjquery組積造のセットアップは、最初のページの読み込みで奇妙に機能しています。最初の行の画像はうまく配置されているようです。2番目の行は最初の行と重なって配置され、3番目の行も同じです。ページの読み込み後、ホームボタンまたはロゴをクリックしてページを再読み込みすると、正常に機能します。

私はfunctions.phpにこのコードを持っており、石積みとjqueryスクリプトを次の場所に配置しています。

if (!is_admin()) {
    wp_enqueue_script('jquery');
    wp_register_script('jquery_min', get_template_directory_uri(). '/js/jquery.min.js', array('jquery'), '1.6.1' );
    wp_enqueue_script('jquery_min');
    wp_enqueue_script('jquery');
    wp_register_script('jquery_masonry', get_template_directory_uri(). '/js/jquery.masonry.min.js', array('jquery'), '2.1.06' );
    wp_enqueue_script('jquery_masonry');
}

このスクリプトはhead.phpにあります：

<?php if (is_page(2)) { ?>
    <script>
        $(function(){
            $('#content').masonry({
                // options...
                itemSelector : '.product',
                columnWidth : 310,
                isAnimated: true,
                animationOptions: {
                    duration: 700,
                    easing: 'linear',
                    queue: false
                }
            });
        });
    </script>
<?php } ?>

これはサイトへのリンクです。

これが最初のページの読み込み時に奇妙に読み込まれる理由について何か考えはありますか？

私は何でもスクリプトを書くのはかなり新しいので、親切にしてください。

4

2 に答える 2

25

コンテンツ（画像）が完全に読み込まれる前にスクリプトが実行されているためだと思います。したがって、ポジショニングエラー。

これを試して。

  $(window).load(function()
  {
      $('#content').masonry({
           itemSelector : '.product',
           columnWidth : 310,
           isAnimated: true,
           animationOptions: {
                duration: 700,
                easing: 'linear',
                queue: false
           }
      });
  });
于 2013-03-01T14:43:48.130 に答える
1

私も同様の問題を抱えていました。最初の読み込み時に画像が重なっていたのです。私は最初に画像をロードすることでこれを克服しました。

$(".id").imagesLoaded(function(){
    $('.id').masonry({
        itemSelector: '.scrapcontent',
        columnWidth: 3,
        isAnimated:true,
        animationOptions: {
            duration: 700,
            easing:'linear',
            queue :false
        }
    });
}

画像が読み込まれると、石積みの義務が開始されます。正常に動作するはずです。

于 2013-03-21T18:08:41.017 に答える