使用同位素的Javascript/jquery图像预加载器

我正在使用同位素jQuery插件作为一种图库过滤器。使用同位素的Javascript/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 
}); 
});

有什么办法，我可以eaither预加载在整个图像container股利和微调浮动在container，或我可以得到它，以便container预加载图像大小，以便他们不坐在彼此？

对不起，如果这是一个noob问题，我一直在阅读同位素文档的最后一段时间，不能让我的头靠近它。

来源

2013-03-07 TheLegend

指向您网站的链接表示您没有带宽。 – lmortenson 2013-03-07 17:10:47

废话我害怕这将发生在我的测试网站，所以它会在几天后重新加载更多的数据 – TheLegend 2013-03-07 17:13:10

我正在对它进行黑客攻击，我想出了如何做到这一点。

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

预加载器插件可以在容器类型div上工作，只需选择div将一次预先加载其所有子项。为了让图像停止层叠在彼此顶部只是有js

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

像这样的负载将解决这个问题。

所有试图帮助我的数据用完的人都是五分之一。 :)

来源

2013-03-08 07:03:02 TheLegend

使用同位素的Javascript/jquery图像预加载器

回答

相关问题