页面加载时的连续图像加载

Question

我看过这个网站，我基本上找到了我正在寻找的东西。然而，虽然对CSS / HTML有合理的能力，但Javascript对我来说是全新的，我担心我在这里昏暗。

我正试图在页面加载时依次加载一些图像，逐个淡入。我已经修改了之前的小提琴，它几乎完全反映了我想要的东西（除了鸭子！），你可以在这里看到它：http://jsfiddle.net/v8azx/1/

我的问题是我无法让它在我的页面上运行。我有一个名为sequencer.js的.js文件，并把它放在页面的头部：

<script type="text/javascript" src="/sw3/sequencer.js"></script>

我的sequencer.js文件由此组成（只有这个，这可能是问题？）

$('.fbimg').each(function (i) {
$(this).delay(500 * (i + 1)).fadeIn(1000);
});

.fbimg是我尝试按顺序加载的类。我的页面上有两个实例。

我的预感是javascript根本没有在我的页面上运行，因为它在小提琴上完美无缺。当我加载页面时，图像根本不会出现（因为显示：无，我认为），这似乎是必要的包含。

我错过了什么？

Answer 1

确保首先加载了jquery脚本;您可能错过了将其包含在您的文档中。

然后我将你的javascript包装在jquery'document ready'函数中。

$( document ).ready(function() {
  $('.fbimg').each(function (i) {
  $(this).delay(500 * (i + 1)).fadeIn(1000);
  });
});