javascript - 页面加载时的顺序图像加载

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 根本没有在我的页面上运行，因为它在小提琴上完美运行。当我加载我的页面时，图像根本不会出现（因为 display:none，我假设）这似乎是一个必要的包含。

我错过了什么？

score 0 · Accepted Answer

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

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

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

1 回答 1