直到所有图片加载完成且jQuery Masonry触发之前，显示“正在加载”。

Question

我正在使用jquery砌体插件，希望在插件触发之前隐藏所有内容。默认情况下，Masonry会在触发之前加载所有图像。我想在插件触发之前显示一个“加载”div。我已经编写了一个页面，检查分辨率是否超过1024像素，然后在页面加载时显示一个“加载”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>

点击此处查看实际示例。

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

谢谢 - Jesse

- Jesse

---

$(document).ready(function() { 和 $(function(){ 是完全相同的。与纯JavaScript的onLoad不同，两者都会执行。它们在第一次加载和运行时执行，并基本上将内容附加到onLoad事件中。我邀请您阅读此stackoverflow问题以获取更多信息。 - roselan

Answer 1

砌体布局（Masonry）在设置砖块完成后会向容器添加“masonry”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>

然后在CSS中使用

#container.masonry #loading {display: none}

并且有规定，直到插件完成后，盒子才会变得不可见。

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

masonry会为position: absolute, top和left的box添加内联样式，您需要根据自己的网站进行调整。

这将使具有id“loading”的DIV在masonry设置完box后消失。

- frozenkoi

---

当你第一次意识到它的工作原理时，这确实具有惊艳效果。但如果砌体出现任何问题，甚至完全关闭js，你的内容将永远被隐藏，这有点糟糕。 - squarecandy

@squarecandy 是的，但这也是 JavaScript 的许多问题之一。不过可以通过像能力检查器这样的工具来解决。例如，在 HTML 中设置一个根类别 nojs，然后由 JavaScript 删除它。只有在该类别不存在时才隐藏内容。 - frozenkoi

Answer 2

不要把你的.show()和.hide()函数放在$(document).ready()中，而是将它们放在imagesLoaded中：

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

因为在图片加载完成之前，文档可能已经准备就绪，所以你会看到一个没有完全加载的页面。

- Alex

---

如果我理解请求正确的话，显示和隐藏应该放在“/其他内容/”之后。（可能甚至在函数之后，而不是在内部，如果没有异步操作，比如ajax或设置超时）。 - roselan

它绝对应该放在函数内部，否则show和hide方法将在图像加载之前被调用，显示一个没有所有图像的页面。imageLoaded方法本质上是设置回调，即“一旦$container内的所有图像都加载完成，就调用此函数”。你可以在其他内容之后放置.show()和.hide()方法，值得尝试。 - Alex

我确实查看了插件，它可以精确地做到这一点。所以是的，它将在函数内起作用 :) - roselan

谢谢Alex和其他人 - 正是我在寻找的。 - Jesse

@light24bulbs imagesLoaded是jQuery砌体插件的一种方法。它将该方法添加到jQuery对象中。回调由jQuery masonary调用，而传递给$(document).load的回调则由jQuery本身调用。 - Alex

Answer 3

相当简单:

使用窗口的onload

http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

- Royi Namir

---

我不知道为什么有人给你点了踩，但是我的问题通过使用jQuery $(window).load(function(){} 得到了解决。谢谢！ - meewog

@MehrdadDastgir 这里有很多孩子们，他们的手指非常快，甚至不知道自己在踩什么。 - Royi Namir