显示“正在加载”，直到所有图像都加载完毕并且 jquery Masonry 触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7460641/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display 'loading' until all images have loaded and jquery Masonry triggers
提问by Jesse
I am using the jquery Masonry pluginand looking to hide all content until after the plugin triggers. Masonry by default loads all images before it triggers. I want to display a 'loading' div until the plugin has triggered. I have implemented a page that checks the resolution is above 1024px, then displays a 'loading' div as the page loads but right now page content appears before the plugin triggers.
我正在使用jquery Masonry 插件并希望在插件触发之前隐藏所有内容。默认情况下，砌体会在触发之前加载所有图像。我想显示一个“加载”div，直到插件触发。我已经实现了一个检查分辨率是否高于 1024px 的页面，然后在页面加载时显示一个“正在加载”的 div，但现在页面内容出现在插件触发之前。
<script>
$(document).ready(function() {
$('#content').show();
$('#loading').hide();
});
$(function(){
var $container = $('#container');
var width = $(window).width();
var height = $(window).height();
if ((width > 1024 )) {
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.box',
columnWidth: 120,
});
});
}
else {
//load the css styles for screen res below 1024
}
});
</script>
As you can see there is a delay between the content appearing and the plugin triggering. Hoping someone can help me delay the content appearing unit after trigger?
如您所见，内容出现和插件触发之间存在延迟。希望有人可以帮助我延迟触发后的内容出现单元？
Cheers - Jesse
干杯 - 杰西
采纳答案by Alex
Rather than placing your .show()and .hide()calls inside $(document).ready(), put them inside imagesLoaded:
而不是将您的.show()和.hide()电话放在里面$(document).ready()，而是把它们放在里面imagesLoaded：
$container.imagesLoaded( function(){
$('#content').show();
$('#loading').hide();
/* other stuff... */
});
Because the documentmight be ready before the images have loaded, so you see an incompletely loaded page.
因为document可能在图像加载之前就准备好了，所以您会看到一个未完全加载的页面。
回答by frozenkoi
Masonry adds the "masonry" css class to the container after it finishes setting up the bricks. Just add css rules to hide the DIV.
Masonry 在完成设置砖块后将“masonry”css 类添加到容器中。只需添加 css 规则即可隐藏 DIV。
For example, if you have
例如，如果你有
<div id="container">
<div id="loading">Loading...</div>
[items to use in the masonry layout]
<div class="box">1</div>
<div class="box">2</div>
</div>
then in the CSS use
然后在 CSS 中使用
#container.masonry #loading {display: none}
and have rules that make the box'es invisible until the plugin finishes
并有规则使box'es 不可见，直到插件完成
#container .box {position: absolute; top: -1000px; left: -1000px}
masonry will give it inline styles to the box'es for position: absolute, topand leftanyway. You will, of course, have to tailor this to your own site.
砖石会给它内嵌样式的box“ES的position: absolute，top和left无妨。当然，您必须根据自己的网站进行调整。
That should make the DIV with id "loading" to disappear after masonry is done setting up the box'es.
这应该使 id 为“正在加载”的 DIV 在砌体完成设置框后消失。
回答by Royi Namir
pretty simple :
很简单：
use the window onload
使用窗口加载
http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/
http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/
