Javascript，jQuery，在另一个函数之后执行函数

Question

我有这个 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>

如您所见，它只是运行加载图像几秒钟，然后显示 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.

通过这种方式，#loaded DIV 将完全加载并且可以正常工作，因为它很重。

简而言之，我必须确保 #loaded 在显示之前已被浏览器完全加载。我如何创建一个函数来执行此操作？

On document ready show the loading DIV. Then WAIT for 3-4 seconds, then make the loading disappear and the loaded DIV visible.

这可能吗？

Answer 1

将淡入启 Action 为淡出的回调。

    $(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);
           });
    });

但要正确执行此操作，我会将#load div 添加到html，通过css 将其隐藏。然后只需在 document.ready 上执行 fadeOut。

更新。

结合 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);});
    });
});