第一次加载时jQuery同位素不起作用，如何等待所有资源/图像加载? [英] jQuery isotope on first load doesn't work, How do I wait for all resources/images to be loaded?

问题描述

在这里，我已经使用jQuery同位素将它们组合在一起.. http://jsbin.com/eziqeq/6/edit

I've got something I've put together using jQuery isotope here.. http://jsbin.com/eziqeq/6/edit

这似乎可以正常工作，但是在第一次加载新标签页时，Isotope插件会将wrapper元素的高度设置为0.如果刷新页面，它确实可以工作并根据以下参数设置父元素的高度在里面的物品上.

It seems to work in general but on first load, of a new tab, the Isotope plugin is setting the height of the wrapper element to 0. If I refresh the page it does work and sets the height of the parent element based on the the items found inside.

任何帮助将不胜感激.我想不出为什么从第一次加载开始就不起作用，而在随后的重新加载上却如此呢..除非它可能与缓存加载的图像有关?

Any help would be greatly appreciated. I can't think why off this first load this isn't working and on subsequent reloads it is.. unless its perhaps something to do with caching the images it loads?

编辑-

这是Webkit浏览器中的缓存问题，因为它在Firefox和工作选项卡上有效，当我清除缓存并刷新页面时，直到再次刷新它才起作用.

This is a caching issue in Webkit browsers as it works on Firefox and on a working tab when I clear the cache and refresh the page it won't work until refreshed again.

推荐答案

您可以使用mkoryak建议的插件.

You could use a plugin as suggested by mkoryak.

或者您可以使用以下代码:(无需插件-仅 jQuery ):

or you could use the following: (no plugin required - jQuery only):

// 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时正确显示页面).

Using the above method, you can also be sure that all the CSS stylesheets are loaded as well (to make sure your page is displayed properly when isotope kicks in).

" DOM就绪".

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

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

"Window load" waits for all the resources and then fires.

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

注意:(由@DACrosby撰写):如果缓存了图片，load()不会总是触发(即，当前未从站点加载图片-您正在使用自己的本地副本).

Note: (by @DACrosby): load() won't always fire if the images are cached (ie, they're not presently being loaded from the site - you're using your local copy).

这篇关于第一次加载时jQuery同位素不起作用，如何等待所有资源/图像加载?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！