Question

我使用同位素jQuery插件作为一种图库过滤器。

我有80张300px x 200px或200px x 300px的图片，我遇到的问题是，在点击图库标签时保存图像的同位素容器在加载时会以某种方式重叠。它有时无法在页面停止加载之前加载所有图像，您可以看到我在此处构建的网站cake decadence。我正在阅读有关预加载图像的信息，我读了这个堆栈溢出问题here，他推荐了图像预加载器，我试过但它没有工作。

我的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 
});
});

有没有办法让我可以在整个container div中预加载图像并让微调器浮动在container中，或者我可以得到{{1}预加载图像大小，以便它们不会相互坐在一起？

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

Answer 1

我正在攻击它，我想出了怎么做。

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

预加载器插件可以在容器类型div上工作，只需选择div就可以一次预加载一个子容器。要使图像停止在彼此之上分层，只需使用js

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

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

所有试图帮助我了解我的数据的人都很高兴。：）

带同位素的Javascript / Jquery图像预加载器

1 个答案: