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

Javascript/Jquery Image preloader with isotope

本文关键字：图像 加载 Jquery 同位素 Javascript      更新时间：2023-09-26

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

我有80张图片，要么300px x 200px或200px x 300px，我遇到的问题是，当点击画廊选项卡时，持有图像的同位素容器在加载时以某种方式与它们重叠。它有时不能加载所有的图像之前，页面停止加载，你可以看到我的网站，我在这里建设蛋糕颓废。我正在阅读关于预加载图像，我在这里读到这个堆栈溢出问题，他推荐图像预加载程序，我尝试过，但它不起作用。

我的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中预加载图像，并在container中浮动旋转器，或者我可以得到它，以便container预加载图像大小，使它们不坐在彼此上?

对不起，如果这是一个新手的问题，我一直在阅读同位素文件的最后一段时间，不能得到我的头围绕它。

我在黑它，我想出了怎么做。

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

预加载器插件可以在容器类型div上工作，只需选择div将一次预加载它的所有子节点。要想让图像停止层叠只需要输入js

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

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

向所有试图帮助我的人击掌，对不起，我的数据快用完了。:)
相关文章：