显示“正在加载”，直到所有图像都已加载并且 jquery Masonry 触发器答案

【问题标题】：Display 'loading' until all images have loaded and jquery Masonry triggers显示“正在加载”，直到所有图像都已加载并且 jquery Masonry 触发器
【发布时间】：2011-09-18 09:35:33
【问题描述】：

我正在使用jquery Masonry plugin 并希望在插件触发之前隐藏所有内容。 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>

See working example here.

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

干杯 - 杰西

【问题讨论】：

$(document).ready(function() { 和 $(function(){ 完全相同。与纯 javascript onLoad 不同，两者都会执行。它们在首次加载、首次运行时执行，并且基本上将内容附加到 onLoad 事件。我邀请您阅读this stackoverflow question 了解更多信息。

标签： jquery image jquery-masonry

【解决方案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}

并有规则使box'es 在插件完成之前不可见

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

masonry 无论如何都会给 box'es 的 position: absolute、top 和 left 提供内联样式。当然，您必须根据自己的网站对其进行调整。

这应该会使 id 为“正在加载”的 DIV 在砌体完成设置盒子后消失。

【讨论】：

当您第一次意识到它有效时，它具有令人惊叹的因素。但是，如果由于任何原因砌体失败，或者即使 js 完全关闭，您的内容将永远隐藏，这有点糟糕。
@squarecandy 没错，但 JavaScript 的许多事情都是如此。这可能可以处理诸如能力检查器之类的事情。例如，在 HTML 中设置一个像 nojs 这样的根类，它会被 JavaScript 删除。并且仅在该类不存在时隐藏内容。

【解决方案2】：

与其将.show() 和.hide() 调用放在$(document).ready() 中，不如将它们放在imagesLoaded 中：

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

因为document 可能在图像加载之前就准备好了，所以您会看到一个未完全加载的页面。

【讨论】：

如果我正确理解了请求，显示和隐藏应该在之后 /* 其他东西 */. （可能甚至在函数之后，而不是内部，如果内部没有异步，例如 ajax 或设置超时）。
它肯定属于函数内部，否则show 和hide 方法将在图像加载之前调用，显示一个没有所有图像的页面。 imageLoaded 方法本质上是设置一个回调，说“一旦$container 中的所有图像都加载完毕，调用这个函数”。不过，您可以将 .show() 和 .hide() 方法放在其他东西之后，值得一试。
我确实看过插件，它确实做到了。所以是的，它将在函数内部工作:)
感谢 Alex 和其他人 - 正是我想要的。
@light24bulbs imagesLoaded 是jQuery masonry 插件的一个方法。它将方法添加到jQuery 对象。回调由 jQuery masonary 调用，而传递给$(document).load 的回调由 jQuery 自己调用。

【解决方案3】：

很简单：

使用窗口加载

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

【讨论】：

我不知道为什么有人对你投了反对票，但我的问题通过使用 jQuery $(window).load(function(){} 解决了，谢谢！
@MehrdadDastgir 这里有很多孩子在不知道他们投反对票的情况下很快就投反对票了。