6

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

请参阅此处的工作示例。

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

干杯 - 杰西

4

3 回答 3

8

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，无论如何。当然，您必须根据您自己的网站进行调整。topleft

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

于 2011-11-08T04:54:26.760 回答
5

.show()与其把你的和.hide()电话放在里面，不如$(document).ready()把它们放在里面imagesLoaded：

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

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

于 2011-09-18T09:41:09.213 回答
4

很简单：

使用窗口加载

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

于 2011-09-18T09:38:54.630 回答