0

我正在使用 jQuery 插件 Masonry，当我对另一个页面进行 ajax 调用以加载画廊的图像时，我遇到了一个问题。ajax 调用有效并且图像加载但是当进行调用时，会发生一些事情，它删除了 Masonry 附加到我的 div 之一的类之一。

这是我的 html 在第一页上的外观。这里一切都很好，并显示了 masonry-brick 类，我需要渲染出适当的 css 以使一切看起来不错，它还渲染出内联 css。

  <a href="/system/images/series_uploads/15/original/berkshire_25585_walnut_famousdaves03.jpg?1330115640" rel="lightbox['gallery']">
    **<div class="item masonry-brick" style="position: absolute; top: 0px; left: 0px;">**<img alt="" src="/system/images/series_uploads/15/gallery/berkshire_25585_walnut_famousdaves03.jpg?1330115640" title="Berkshire" />
    <div class="gallery-text">
      <h3>Berkshire</h3>
      <p>HDP &ndash; High Definition Porcelain</p>
    </div>
    </div>
  </a>

当我单击链接进行 ajax 调用时，图像可以正常加载，并且它适用于所有链接，但是 masonry-brick 类被删除并且图像丢失了它们的 css。

  jQuery("#project-galleries-navigation li.load-category a").on("click", function(){      
     var href = jQuery(this).attr("href");
            jQuery("#gallery").fadeOut(300).remove("img").load(href).fadeIn(2300);      
        return false;           
  });

这是我用于砌体的代码。 

var $container = jQuery('#copy-wrapper-gallery');
$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector : '.item',
    isAnimated: true            
  });
});

当页面加载新数据时，这就是我的 html 最终发生的事情。masonry-brick 类不再存在，内联 css 也消失了。

  <a href="/system/images/series_uploads/7/original/ashton_23931_smokey_beige_.jpg?1330114250" rel="lightbox['gallery']">
   **<div class="item">**<img alt="" src="/system/images/series_uploads/7/gallery/ashton_23931_smokey_beige_.jpg?1330114250" title="Ashton" />
    <div class="gallery-text">
      <h3>Ashton</h3>
      <p>Porcelain</p>
    </div>
    </div>
  </a>

有没有人遇到过这个问题或知道解决这个问题的方法？

4

1 回答 1

0

我可以通过修改这个 jquery 并为其设置一个回调函数来让它工作。

            jQuery("#gallery").fadeOut(300).remove("img").load(href, function(){
                    jQuery("#gallery").masonry("reload");
                }).fadeIn(2300);    
                e.preventDefault();                     
      });
于 2013-04-23T17:06:09.777 回答