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

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 将被完全加载，并且它会正常工作，因为它是一个重的 DIV。

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

文档准备好后显示加载 DIV。然后等待3-4秒，然后使加载消失并且加载的DIV可见。

这可能吗？

Answer 1

让淡入启动作为淡出的回调。

    $(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 即可。

更新。

结合安德鲁和我的答案的优点，这应该可以完美地工作：

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

Answer 2

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

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

另一种方法是使用 JavaScript“预加载”图像，但我不知道这会如何更有效。

Answer 3

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

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

请参阅 http ://api.jquery.com/load-event/

Answer 4

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

<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"/>');
    setTimeout(function () {
      $('#loaded').fadeIn(1500);
      $('#load').fadeOut(2000);
    }, 4000)
  });
</script>