Javascript、jQuery、Do函数一个接一个函数

我有这个javascript函数

<script type="text/javascript">
  $(document).ready(function () {
  $('#load').html('<img style="display:block; margin:10px auto;background-color: #EEE;" src="<?echo $site["url"];?>images/icons/loading.gif"/>');
  $('#loaded').fadeIn(1500);
     $('#load').fadeOut(2000);
  });
</script>

$（文档）.ready（函数（）{
$（'#load'）.html（'images/icons/load.gif/>）；
$（'加载'）.fadeIn（1500）；
$（'加载'）。淡出（2000年）；
});

正如您可能看到的，它只需运行一个加载映像几秒钟，然后显示div并隐藏加载映像。 这对我不好。我需要一个这样工作的函数。代码的逻辑是：

As soon as $('#load').html('<img style="display:block; margin:10px auto;background-color: #EEE;" src="<?echo $site["url"];?>images/icons/loading.gif"/>'); is running, then wait 4 seconds, and then show the #loaded DIV.

只要$（'#load'）.html（'images/icons/loading.gif“/>）；正在运行，然后等待4秒钟，然后显示已加载的DIV。

这样#加载的DIV将被完全加载，并且工作正常，因为它是一个很重的DIV

简而言之，在显示之前，我必须确保#loaded已被浏览器完全加载。 我怎样才能创建一个能做到这一点的函数

在document ready上显示加载分区。然后等待3-4秒，然后使加载消失，加载分区可见

---

这可能吗？

将fadein启动作为淡出的回调

    $(document).ready(function() {
        $('#load')
          .html('<img style="display:block; margin:10px auto;background-color: #EEE;" src="<?echo $site["url"];?>images/icons/loading.gif"/>')
          .fadeOut(2000, function() {
                $('#loaded').fadeIn(1500);
           });
    });

$（文档）.ready（函数（）{
$（“#加载”）
.html（'images/icons/loading.gif“/>）
.fadeOut（2000年，函数（）{
$（'加载'）.fadeIn（1500）；
});
});

但为了正确地执行此操作，我会将#load div添加到html中，通过css隐藏它，然后在document.ready上进行淡出

更新。

将Andrew和我的答案中最好的结合在一起，这应该是完美的：

<div id="load" style="display:none">Loading, please wait</div>

$(document).ready(function() {
        $('#load').show();
    $('#loaded').load(function() {
        $('#load').fadeOut(500,function(){  $(this).fadeIn(500);});
    });
});

正在加载，请稍候
$（文档）.ready（函数（）{
$（'#load'）.show（）；
$（'#loaded'）.load（函数（）{
$（'#load'）.fadeOut（500，function（）{$（this.fadeIn（500）；}）；
});
});

将fadein启动作为淡出的回调

    $(document).ready(function() {
        $('#load')
          .html('<img style="display:block; margin:10px auto;background-color: #EEE;" src="<?echo $site["url"];?>images/icons/loading.gif"/>')
          .fadeOut(2000, function() {
                $('#loaded').fadeIn(1500);
           });
    });

$（文档）.ready（函数（）{
$（“#加载”）
.html（'images/icons/loading.gif“/>）
.fadeOut（2000年，函数（）{
$（'加载'）.fadeIn（1500）；
});
});

但是为了正确地实现这一点，我将把#load div添加到html中，通过css隐藏它。然后简单地在document.ready上进行淡出

更新。

将Andrew和我的答案中最好的结合在一起，这应该是完美的：

<div id="load" style="display:none">Loading, please wait</div>

$(document).ready(function() {
        $('#load').show();
    $('#loaded').load(function() {
        $('#load').fadeOut(500,function(){  $(this).fadeIn(500);});
    });
});

正在加载，请稍候
$（文档）.ready（函数（）{
$（'#load'）.show（）；
$（'#loaded'）.load（函数（）{
$（'#load'）.fadeOut（500，function（）{$（this.fadeIn（500）；}）；
});
});

您的代码不会“加载”图像。它所做的只是将图像标记添加到DOM中。一旦将标记添加到DOM中，浏览器将尝试添加图像

最好的办法是将图像添加到HTML代码中，并用css隐藏它。然后使用jQuery的show函数来显示它，而不是尝试加载图像

另一种方法是使用javascript“预加载”图像，但我不认为这会更有效。

您的代码不会“加载”图像。它所做的只是将图像标记添加到DOM中。一旦将标记添加到DOM中，浏览器将尝试添加图像

最好的办法是将图像添加到HTML代码中，并用css隐藏它。然后使用jQuery的show函数来显示它，而不是尝试加载图像

---

另一种方法是使用javascript“预加载”图像，但我不认为这会更有效。

您可以将处理程序绑定到#loaded div上的

load

事件：

$(document).ready(function() {
    $('#loaded').load(function() {
        $('#loaded').fadeIn(500);
        $('#load').fadeOut(500);
    });
});

---

请参见

您可以将处理程序绑定到#loaded div上的

load

事件：

$(document).ready(function() {
    $('#loaded').load(function() {
        $('#loaded').fadeIn(500);
        $('#load').fadeOut(500);
    });
});

---

请看

我对所有这些答案感到有点困惑，不知道你的问题是什么，也不知道我是对的还是他们是对的，但这是如何等待4秒钟。（在原始代码中添加了2行）

$（文档）.ready（函数（）{
$（'#load'）.html（'images/icons/load.gif/>）；
setTimeout（函数（）{
$（'加载'）.fadeIn（1500）；
$（'加载'）。淡出（2000年）；
}, 4000)
});

我对所有这些答案感到有点困惑，不确定你的问题是什么，也不确定我是否正确或他们是否正确，但这就是如何等待4秒钟。（在原始代码中添加了2行）

$（文档）.ready（函数（）{
$（'#load'）.html（'images/icons/load.gif/>）；
setTimeout（函数（）{
$（'加载'）.fadeIn（1500）；
$（'加载'）。淡出（2000年）；
}, 4000)
});

no.load（）启动一个ajax调用，需要一个url作为第一个参数，而不是回调。@pixeline-有两种形式的

load（）

。一个按照你的描述工作，另一个按照我的描述工作。这是参考资料，谢谢，我不知道那个特定的用例。非常有用，api给出了一个适合这个问题的示例：调用image.no的加载事件。load（）启动一个ajax调用，需要一个url作为第一个参数，而不是回调。@pixeline-有两种形式的

load（）

。一个按照你的描述工作，另一个按照我的描述工作。这是参考资料，谢谢，我不知道那个特定的用例。非常有用，api给出了一个适用于此问题的示例：为图像调用加载事件。它工作正常，但我在Firebug this[0]中遇到此错误。ownerDocument为null。为了让您知道，我使用jQuery 1.3.2，我认为这是因为在回调发生时可能没有加载映像。请参阅Andrew Cooper建议在映像上使用load事件：如果在$（img）.load（）时调用回调，它应该可以工作。它工作正常，但我在Firebug this[0]中遇到此错误。ownerDocument为null。为了让您知道，我使用jQuery 1.3.2，我认为这是因为在回调发生时可能没有加载映像。请参阅Andrew Cooper建议在图像上使用load事件：如果在$（img）.load（）时调用回调，它应该会起作用。我知道我有点困惑，但我倾向于认为这与问题无关。这是有用的信息而不是实际的答案，对吗？我知道我有点困惑，但是