2

我正在使用同位素 jQuery 插件作为一种画廊过滤器。

我有 80 张图片，大小为 300 像素 x 200 像素或 200 像素 x 300 像素，我遇到的问题是单击图库选项卡时保存图像的同位素容器在加载时会以某种方式与它们重叠。它有时无法在页面停止加载之前加载所有图像，您可以看到我在这里建立的我的网站蛋糕颓废。我正在阅读有关预加载图像的信息，我在这里阅读了此堆栈溢出问题，他推荐了我尝试过但无法正常工作的图像预加载器。

我的 html 看起来像这样

<div id="image_container">
  <div id="container">
    <img class="box wed cake" src="/images/gallery/wed2.png" />
    <img class="box wed cake" src="/images/gallery/wed1.png" />
    <img class="box wed cake" src="/images/gallery/wed13.png" />
    ...
  </div>
</div>

我把它放在页面的同位素文件中

$(document).ready(function(){
var $container = $('#container');
$container.isotope({
  filter: '',
   animationOptions: {
   duration: 750,
   easing: 'linear',
   queue: false,
   }
 });

$('#filter a').click(function(){
  var selector = $(this).attr('data-filter');
  $container.isotope({ 
  filter: selector,
  animationOptions: {
  duration: 750,
  easing: 'linear',
  queue: false,
  }
 });
return false;
});

$('.box').preloader({
  loader: '/images/loading.gif',
  fadeIn: 700,
  delay : 200 
});
});

有什么方法可以让我在整个containerdiv 中预加载图像并让微调器浮动在 div 中container，或者我可以得到它以便container预加载图像大小，这样它们就不会坐在彼此上？

抱歉，如果这是一个菜鸟问题，我最近一段时间一直在阅读同位素文档并且无法理解它。

4

1 回答 1

1

我正在破解它，我想出了如何去做。

$('#container').preloader({
  loader: '/images/loading.gif',
  fadeIn: 700,
  delay : 200 
});

预加载器插件可以在容器类型的 div 上工作，只需选择 div 将一次预加载其所有子项。要让图像停止相互叠加，只需使用 js

$(window).load(function(){ ...

像这样加载将解决该问题。

向所有试图帮助我的数据用完的人致敬。:)

于 2013-03-08T07:03:02.940 回答