[英]Javascript/Jquery Image preloader with isotope
I am using the isotope jQuery plugin as a sort of gallery filter. 我正在使用同位素jQuery插件作为图库过滤器。
I have 80 pictures that are either 300px x 200px or 200px x 300px, the issue i am having is that the isotope container that holds the images when clicking on the gallery tab somehow overlaps them as they are loading. 我有80张300px x 200px或200px x 300px的图片,我遇到的问题是,单击图库选项卡时保存图像的同位素容器在加载时会以某种方式重叠。 It sometimes cant load all the images before the page stops loading you can see my site i am building here cake decadence .
在页面停止加载之前,有时它无法加载所有图像,您可以看到我在这里建立的站点decade废 。 i was reading up about pre-loading images i read this stack overflow question here and he recommended image pre loader which i tried but its not working.
我正在阅读有关预加载图像的信息,我在这里阅读了此堆栈溢出问题,他推荐了我尝试过但未正常工作的图像预加载器。
My html looks like this 我的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>
I put this in my isotope file for the page 我将其放在页面的同位素文件中
$(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
});
});
Is there any way that i could eaither pre-load the images with in the whole container
div and have the spinner floating in the container
, or could i get it so that the container
to pre-load the image sizes so that they dont sit on eachother? 有什么办法可以让我在整个
container
div中预加载图像,并使微调框漂浮在container
,还是可以让container
预加载图像大小,以免它们落在上面彼此?
sorry if this is a noob question i have been reading the isotope docs for the last little while and cant get my head around it. 抱歉,如果这是一个菜鸟问题,我最近一阵子都在阅读同位素文档,但无法理解。
I was hacking on it and i figured out how to do it. 我正在破解它,我想出了怎么做。
$('#container').preloader({
loader: '/images/loading.gif',
fadeIn: 700,
delay : 200
});
The pre-loader plugin can work on container type divs, just selecting the div will pre-load all its children one at a time. 预加载器插件可以在容器类型div上工作,只需选择div即可一次预加载其所有子级。 To get the image to stop layering on top of each other just have the js
要使图像停止在彼此之上分层,只需使用js
$(window).load(function(){ ...
load like this that will solve that issue. 这样的负载将解决该问题。
High fives to all who tried to help sory about my data running out. 向所有试图帮助解决我的数据即将耗尽的人致以很高的敬意。 :)
:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.