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

【问题标题】：Javascript/Jquery Image preloader with isotope带有同位素的 Javascript/Jquery 图像预加载器
【发布时间】：2013-03-07 16:51:45
【问题描述】：

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

我有 80 张图片，大小为 300 像素 x 200 像素或 200 像素 x 300 像素，我遇到的问题是单击图库选项卡时保存图像的同位素容器在加载时会以某种方式与它们重叠。它有时无法在页面停止加载之前加载所有图像，您可以在此处查看我正在构建的网站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 中，或者我可以得到它以便container 预加载图像大小以使它们不会相互重叠？

对不起，如果这是一个菜鸟问题，我最近一直在阅读同位素文档，但无法理解它。

【问题讨论】：

指向您网站的链接显示您的带宽不足。
废话，我担心这会发生在我的测试站点上，所以几天后它会重新加载更多数据

标签： javascript jquery-isotope preloader

【解决方案1】：

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

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

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

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

这样加载可以解决这个问题。

向所有试图帮助我为我的数据用完而感到遗憾的人致以崇高的敬意。 :)

【讨论】：