多个imagesLoaded函数css调用问题
Mutliple imagesLoaded functions css call issue
我的preloader不显示当我有两个函数使用Imagesloaded。当我禁用imagesloaded时工作正常。需要有能力使用三个或四个取决于。
我的预加载器div和SCSS。
<div class="masonry-loading">
<img src="<?php echo get_template_directory_uri(); ?>/library/images/ajax-loader.gif" />
</div>
.masonry-loading {padding:10% 0 10% 50%;}
img {border:0 !important;}
这是我对不同列的函数。
// Masonary
$(document).ready(function() {
var $container = $('.masonry-c');
var min_width = 230;
$('.masonry-c').hide();
$container.imagesLoaded(function() {
$('.masonry-c').fadeIn('fast');
$("div.masonry-loading").css({
'display': 'none'
});
$container.masonry({
itemSelector: '.masonry-box',
isAnimated: true,
columnWidth: function (containerWidth) {
var box_width = (((containerWidth) / 3) | 0);
if (box_width < min_width) {
box_width = (((containerWidth) / 2) | 0);
}
$('.masonry-box').width(box_width);
return box_width;
}
});
});
});
// Masonary
$(document).ready(function() {
var $container1 = $('.masonry-four-c');
var min_width = 200;
$('.masonry-four-c').hide();
$container1.imagesLoaded(function() {
$('.masonry-four-c').fadeIn('fast');
$container1.masonry({
itemSelector: '.masonry-four-box',
isAnimated: true,
columnWidth: function (containerWidth) {
var box_width = (((containerWidth) / 4) | 0);
if (box_width < min_width) {
box_width = (((containerWidth) / 3) | 0);
}
if (box_width < min_width) {
box_width = (((containerWidth) / 2) | 0);
}
$('.masonry-four-box').width(box_width);
return box_width;
}
});
});
});
下面我放置了CSS来删除加载器,由于某种原因,当我在imagesLoaded之后在上面的函数中加载它时,这不起作用。也许如果我能得到那份工作,问题就解决了。
function triggerCallback() {
callback.call($this, $images),
$("div.masonry-loading").css({'display': 'none'});
}
尝试了很多东西,我打赌是一些简单的东西。无论如何,帮助将非常感激。
使用,
$('myelement').load(function(){
//when your element / img is loaded then this code will run.
//hide/show whatever u want
});
相关文章:
- d3-js快速事件调用问题
- Node.js-异步方法调用问题
- JavaScript 中的函数调用问题
- AngularJS:http 链调用问题和 NodeJS:在多个 http 调用中使用变量的问题
- IE8 XHTML 在 jQuery ajax 调用问题中返回
- 通过JS Ajax调用问题填充数据
- JSONP函数调用问题
- MVC Ajax调用问题
- IE8切片调用问题-Array.prototype.slice-'这'不是Javascript对象
- JS和SWF调用问题
- OO JavaScript方法调用问题
- 异步调用问题
- Javascript函数调用问题
- 这个fetch调用问题
- MVC 4 -级联下拉列表- Ajax JavaScript调用问题
- AngularJS路由导致服务器调用问题
- 多个imagesLoaded函数css调用问题
- ajax同步调用问题
- HTML5缓存Spring项目Ajax调用问题
- Javascript onclick函数调用问题:won't传递字符串