第一次加载时jQuery同位素不起作用,如何等待加载所有资源/图像？

Question

我在这里使用jQuery同位素放了一些东西.. http://jsbin.com/eziqeq/6/edit

它似乎一般工作,但在第一次加载时,新选项卡,Isotope插件将包装元素的高度设置为0.如果我刷新页面它确实工作并根据的设置父元素的高度里面找到的物品.

任何帮助将不胜感激.我想不出为什么关闭这第一次加载这是不起作用,并在后续重新加载它是..除非它可能与缓存它加载的图像有关？

编辑 -

这是Webkit浏览器中的缓存问题,因为它适用于Firefox和工作选项卡,当我清除缓存并刷新页面时,它将无法再次刷新.

Answer 1

您可以按照建议使用插件mkoryak.

或者您可以使用以下内容:(不需要插件 - 仅限jQuery):

// jQuery - Wait until images (and other resources) are loaded
$(window).load(function(){
    // All images, css style sheets and external resources are loaded!
    alert('All resources have loaded');
});

使用上面的方法,您还可以确保所有CSS样式表都已加载(以确保页面在isotope启动时正确显示).

当DOM准备好(即标记)时," DOM ready "将触发.

$(document).ready( function(){ ... });

" 窗口加载 "等待所有资源然后触发.

$(window).load( function(){ ... });

注意:(通过@DACrosby):如果图像被缓存(即,它们当前没有从网站加载 - 您正在使用本地副本),则load()不会始终触发.

Answer 2

还有另一种方法可以解决这个问题.如果你grid-item包含任何一个,你必须使用另一个js image.在js链接下面是

<script src='http://imagesloaded.desandro.com/imagesloaded.pkgd.js'></script>

然后在下面调用这个占位符js:

/*=============Code for Masonry Gallery ==============*/
    var grid = document.querySelector('.grid');
    var jQuerygrid = jQuery('.grid').isotope({
        itemSelector: '.element-item'
    }); 
    var iso = jQuerygrid.data('isotope');
    jQuerygrid.isotope( 'reveal', iso.items );

    imagesLoaded(grid, function(){
        iso.layout();
    });

您可以从isotop的官方网站获得完整而清晰的详细信息.链接

Answer 3

注意：
1.你应该在windwo load事件中调用iso-top函数（它会等待资源被加载）你也可以在页脚中调用函数。

2.确认css加载后的函数调用。

$(window).load(function(){
     $('.iso').isotope({
     // options
     itemSelector: '.item',
     layoutMode: 'masonry'
    });
   });

也可以使用图像预加载器插件首先加载图像
http://www.createjs.com/#!/PreloadJS

Answer 4

您需要使用chrome中的imageLoaded插件。等待所有图像加载完毕后再初始化同位素