Question

我有一个由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个图像，因此负载非常重，以使页面移动。

谢谢！

Answer 1

我认为延迟加载插件是正确的答案，但是如果你已经确定了什么是可见的以及什么不是第一个，请尝试jQuery sonar（尝试demo）来检测哪些画廊是可见，然后将延迟加载程序附加到隐藏的库中。

Answer 2

我觉得我应该更新这个。我确实通过Lazy Load plugin为Wordpress找到了答案。它使用jQuery Lazy Load以及mdelorey提到的jQuery Sonar。出色地工作，没有设置。谢谢大家。

div显示后加载图像

2 个答案: