0

我有一个由 Wordpress 中的帖子构建的照片库。画廊分为四个不同的类别。当用户导航到图库时，会显示默认类别的图像，而隐藏其他类别。然后通过jquery，用户可以导航到另一个类别，隐藏当前类别和图像，并显示新的类别图像。

所有这些都工作正常，除了页面加载整个画廊，包括所有四个类别的图像，即使用户从未访问过其他类别。

我想要的是其他类别中的图像在显示其类别后单独加载。我该怎么办？

我的一个切换和类别的 html 设置：（其他三个是相同的，除了佣金被替换为雕塑等）

<div class="viewnav gallery-toggle commissions-toggle"> 
 <img src="<?php bloginfo('template_directory')?>/images/works-commissions" alt="" /> 
 <div class="mask"> 
 <h3>Commissions</h3> 
     <a href="#" class="info">See More</a> 
 </div> 
 </div>



 <div class="commissions">

 <h2 class="gallery-title">Commissions</h2>

 <?php query_posts('post_type=works_gallery&galleryitems_category=commissions&order=ASC&posts_per_page=24'); ?>

 <div class="gallery-group">

 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>


      <div class="view"> 
           <?php echo get_the_post_thumbnail($id, 'thumbnail', array('class' => 'gallery-thumbnail')); ?>
           <div class="mask"> 
                <h3><?php the_title();?></h3> 
                <p><?php the_content();?></p>
                <?php $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
                   echo '<a class="info" href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >';
                   echo 'Enlarge Image';
                   echo '</a>';
                 ?>
           </div> 
      </div>


 <?php endwhile;?><?php endif; ?>

 </div><!--gallery-group-->

 <div class="clearfix"></div>

 </div><!--commissions-->

用于切换的 JQuery...

     (function($) {  // beginning wordpress function

    $('.commissions, .decanters, .sculptural, .artglass').hide();
    $('.artglass').fadeIn(1000).addClass('active-gallery');

      $(document).ready(function() {

         $('.gallery-toggle').click(function(){
             $('.active-gallery').hide().removeClass('active-gallery');
             return false;
         });
         $('.commissions-toggle').click(function(){
             $('.commissions').fadeIn(1000).addClass('active-gallery');
         });

     });

对此的任何帮助将不胜感激。四个类别中总共有大约 45 张图片，因此页面移动的负载非常大。

谢谢！

4

2 回答 2

1

我认为延迟加载插件是正确的答案，但是如果您一心想检测什么是可见的，什么不是首先，请尝试使用jQuery sonar（尝试演示）来检测哪些画廊是可见的，然后将延迟加载器附加到画廊是隐藏的。

于 2013-07-17T04:44:42.653 回答
0

我觉得我应该更新这个。我确实通过Wordpress的延迟加载插件找到了答案。它使用 jQuery Lazy Load 以及 mdelorey 提到的 jQuery Sonar。无需设置即可出色地工作。谢谢大家。

于 2013-07-17T14:39:12.553 回答