jQuery初始化顺序

Question

我正在构建一个页面，我想在其中使用 Galleria 脚本 (http://devkick.com/lab/galleria/) 和 jQuery 的手风琴小部件来隐藏不同类别的画廊缩略图。在我的初始化中，我按照两个脚本手册的建议写了：

<script type="text/javascript">
        jQuery(function($) { 
        $('ul.gallery').galleria({
         insert: "#image"
        });

         $("#thumbs").accordion();

        });
</script>

galleria() 函数创建缩略图并为其分配适当的大小。然后，accordion() 函数分配其样式并折叠当前不可见的元素。使用上面的代码，我遇到了一些缩略图由于尺寸为零而变得不可见的问题。

如果我在 galleria() 函数中为缩略图分配大小之前发出警报，我可以看到对于手风琴的不可见页面内的图像，它们的容器在那时的尺寸为零。这对我来说很奇怪，因为我认为这些函数是连续执行的，并且在galleria() 完成之前不会调用accordion()。

更奇怪的是，如果我在手风琴函数之前添加了一个警报，那么一切都会按正确的顺序处理。

很明显，我在这里面临竞争条件。为什么会发生这种情况，我应该怎么做才能保证有序的初始化顺序？

Answer 1

这只是一个猜测，但我猜它与下载图像之前运行的脚本有关。这似乎可以解释为什么手风琴功能之前的alert() 可以使事情正常进行。它使图像有机会加载。

如果这是正确的，你会想要使用 jQuery 的 load() 事件处理程序来确保图像被完全加载。

load() 的文档：http://api.jquery.com/load-event/

Answer 2

我想竞争条件可能是这样一个事实，即一旦 Galleria 添加了所有图像，可能还没有下载它们。这将导致手风琴函数假设图像为零乘零。

添加警报有效的原因是，当您关闭它时，图像已经下载。

如果您想确定执行顺序，请查看 firebug 和 console.log 而不是使用警报，它们不会像警报那样阻止脚本执行。

关于您的主要问题，我想看看 Galleria 是否提供了一些回调功能，以确保在继续之前下载所有图像。