事件不会在初始加载时触发

Question

这是我关于

的另一个问题的延续

此问题与 Isotope. With help from @Robin Carlo Catacutan I have the following isotope.js 有关：

jQuery(function($) {

  var $container = $('#isotope-list'); //The ID for the list with all the blog posts
  $container.isotope({ //Isotope options, 'item' matches the class in the PHP
    itemSelector: '.item',
    layoutMode: 'masonry'
  });

  // Add class when transition is finished
  $container.on( 'arrangeComplete', function( event, filteredItems ) {
    $(".grid figure img").addClass("imgArranged");
  });

  $container.on( 'arrangeComplete',
  function( event, filteredItems ) {
    console.log( 'Isotope arrange completed on ' +
      filteredItems.length + ' items' );
  }
);

  //Add the class selected to the item that is clicked, and remove from the others
  var $optionSets = $('#filters,#filters-undercat'),
    $optionLinks = $optionSets.find('a');

  $optionLinks.click(function() {
    var $this = $(this);
    // don't proceed if already selected
    if ($this.hasClass('selected')) {
      return false;
    }
    var $optionSet = $this.parents('#filters');
    $optionSets.find('.selected').removeClass('selected');
    $this.addClass('selected');

    //When an item is clicked, sort the items.
    var selector = $(this).attr('data-filter');
    $container.isotope({
      filter: selector
    });

    return false;
  });

});

我希望你关注转换完成时应该添加 class 的部分：

  $container.on( 'arrangeComplete', function( event, filteredItems ) {
    $(".grid figure img").addClass("imgArranged");
  });

根据@Robin Carlo Catacutan 的说法，arrangeComplete 存在问题。事件 arrangeComplete 不会在页面初始加载时触发。

正在 functions.php 开头加载同位素:

//Isotope
function add_isotope() {
    wp_register_script( 'isotope', get_template_directory_uri().'/js/isotope.pkgd.min.js', array('jquery'),  true );
    wp_register_script( 'isotope-init', get_template_directory_uri().'/js/isotope.js', array('jquery', 'isotope'),  true );
    wp_enqueue_script('isotope-init');
}

add_action( 'wp_enqueue_scripts', 'add_isotope' );

我 post 我所有的 php 都在最近的 post 秒内，以防你发现任何可疑的东西：

<?php 

$args = array(
    'post_type' => (array( 'foto', 'video', 'web' )),
    'posts_per_page' => '-1',
    'post_taxonomy' => 'any',
);

$the_query = new WP_Query($args); 

?>
<?php if ( $the_query->have_posts() ) : ?>
    <div id="isotope-list">
        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 
            $termsArray = get_the_terms( $post->ID, "category");
            $termsString = "";
                foreach ( $termsArray as $term ) { 
                    $termsString .= $term->slug.' ';
                }
        ?>               
        <div class="<?php echo $termsString; ?> item col-md-4"> 
            <div class="content grid lefttext">
                <figure class="effect-lily">
                    <?php if ( has_post_thumbnail() ) { the_post_thumbnail('frontpage_thumb'); } ?>
                    <figcaption>
                        <div>
                            <h2 class="uppercase regular whitetext textshadow nomarginbottom"><?php the_title(); ?></h2>
                            <p><span class="whitetext thin textshadow"><?php echo(types_render_field( "produkt", array( 'raw' => true) )); ?> / <?php echo(types_render_field( "produsert", array( 'raw' => true) )); ?></span></p>
                        </div>
                        <a href="<?php the_permalink() ?>" rel="bookmark" class="smoothtrans">Se prosjekt</a>
                    </figcaption>           
                </figure>     
            </div> 
        </div>
        <?php endwhile;  ?>
    </div>
<?php endif; ?>

然而，这是最重要的部分，与问题直接相关：

<div class="<?php echo $termsString; ?> item col-md-4"> 
     <div class="content grid lefttext">
          <figure class="effect-lily">
          <?php if ( has_post_thumbnail() ) { the_post_thumbnail('frontpage_thumb'); } ?>
              <figcaption>
                  <div>
                       <h2 class="uppercase regular whitetext textshadow nomarginbottom"><?php the_title(); ?></h2>
                       <p><span class="whitetext thin textshadow"><?php echo(types_render_field( "produkt", array( 'raw' => true) )); ?> / <?php echo(types_render_field( "produsert", array( 'raw' => true) )); ?></span></p>
                  </div>
                  <a href="<?php the_permalink() ?>" rel="bookmark" class="smoothtrans">Se prosjekt</a>
               </figcaption>            
          </figure>     
     </div> 
</div>

不确定是否相关，但作为我使用的与此问题相关的总结：

WordPress
同位素
Bootstrap

我试过的：

正在更改 isotope.js 的加载顺序。尝试过将其包含在 header 中，就在 body 标记结束之前，并且很快。
正在网上搜索类似问题（未找到）
将 $container 重命名为 $grid
更改 addClass 将影响的元素

可以找到该页面here。

您有可行的解决方案或任何想法吗？

在 Android 横向上拉伸图像：

Answer 1

你应该尝试的一件事（这也与你的第一个问题有关），因为你加载图像，是使用 imagesloaded.js. This will allow all images to load before isotope is initiated which will eliminate overlaps See here。我不明白为什么你需要使用 javascript 添加 class "imgArranged" 如果它在 @media 查询中？

var $container = $('#isotope-list'); //The ID for the list with all the blog posts

 $container.imagesLoaded( function() {
 $container.isotope({ //Isotope options, 'item' matches the class in the PHP
 itemSelector: '.item',
 layoutMode: 'masonry'
 });
 });

附录

问题是您正在加载 jQuery 两次，两个不同的版本。你需要选择一个。如果选择 2.1.4，则不使用 query-migrate

首先加载：

 <script src="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/jquery-2.1.4.min.js"></script>    
  <script src="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/collection.js"></script>
  <script src="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/less.js"></script>
  <script src="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/imagesloaded.js"></script>
  <script src="//use.typekit.net/xti5sne.js"></script>

加载时间晚于：

<script type='text/javascript' src='http://www.vekvemedia.no/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>
<script type='text/javascript' src='http://www.vekvemedia.no/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/isotope.pkgd.min.js?ver=1'></script>
<script type='text/javascript' src='http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/isotope.js?ver=1'></script>

事件不会在初始加载时触发

Event does not trigger on the initial load

javascript

php

jquery

jquery-isotope

twitter-bootstrap