显示'；装载'；直到所有图像都加载完毕，jquery才会触发

我正在使用并希望在插件触发之前隐藏所有内容。默认情况下，砌体在触发之前加载所有图像。我想显示一个“加载”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>

$（文档）.ready（函数（）{
$（“#内容”）.show（）；
$（“#加载”）.hide（）；
});
$（函数（）{
var$container=$（“#container”）；
变量宽度=$（窗口）.width（）；
var height=$（window.height（）；
如果（（宽度>1024））{
$container.imagesLoaded（函数（）{
$container.com({
itemSelector:“.box”，
列宽：120，
});
});
}
否则{
//加载屏幕分辨率低于1024的css样式
}
});

正如您所见，在内容出现和插件触发之间存在延迟。希望有人能帮我延迟触发后的内容出现单元

干杯-杰西非常简单：

使用窗口加载

---

不要将

.show（）

和

.hide（）

调用放在

$（document.ready（）

中，而是将它们放在

图像加载的
中：

$container.imagesLoaded( function(){
  $('#content').show();
  $('#loading').hide();
  /* other stuff... */
});

因为
文档
可能在图像加载之前就准备好了，所以您会看到一个未完全加载的页面。
Mashise在完成砖块设置后将“Mashise”css类添加到容器中。只需添加css规则来隐藏DIV

例如，如果你有

<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>

并且有规则使
框在插件完成之前不可见

#container .box {position: absolute; top: -1000px; left: -1000px}

砌体将为
位置的
框
提供内联样式：绝对
、
顶部
和
左侧
。当然，您将不得不根据自己的站点进行定制

这将使id为“loading”的DIV在完成框的设置后消失。
如果我正确理解了请求，则show and hide应在/*其他内容*/之后进行。（即使是在函数之后，也可能不是在函数内部，如果函数内部没有异步，比如ajax或set timeout）。它肯定属于函数内部，否则在加载图像之前将调用
show
和
hide
方法，显示一个没有所有图像的页面。
imageLoaded
方法实质上是设置一个回调，说“一旦
$container
中的所有图像都加载完毕，调用此函数”。你可以把
.show（）
和
.hide（）
方法放在其他东西之后，值得一试。因此，是的，它将在函数内部工作：）谢谢Alex和其他人-正是我想要的。@light24bulls
imagesLoaded
是插件的一种方法。它将该方法添加到
jQuery
对象中。回调由jQuery调用，而传递给
$（document）.load的回调由jQuery本身调用。
$（document）.ready（function（）{
和
$（function（））{
完全相同。与纯javascript onLoad不同，两者都将执行。它们在首次加载、首次运行的基础上执行，基本上会将内容附加到onLoad事件中。我邀请您阅读更多信息。我不知道为什么有人否决了您，但我的问题通过使用jQuery
$（window）.load（function（）{}解决了
谢谢！@MehrdadDastgir这里有很多孩子在不知道他们投了什么反对票的情况下就快速地找到了反对票。当你第一次意识到这一点时，这有一个令人惊叹的因素。但是如果砖石工程因任何原因失败，或者即使js完全关闭，你的内容就会永远隐藏起来，这有点糟糕。@squarkandy是真的，但我知道许多事情都是这样的，比如JavaScript。可能可以处理功能检查。例如，在HTML中设置一个根类，如
nojs
set，该类会被JavaScript删除。并且仅当该类不存在时才隐藏内容。
#container .box {position: absolute; top: -1000px; left: -1000px}