jquery - 显示加载程序时预加载 div 内容

标签 jquery html preload

这似乎是已回答数百次的问题,但我找不到可行的解决方案。

我有这个代码:

<script>
  $("#content div").hide();
  $("#loader").show();

  $("#content div").load("file.html", function () {

    $("#loader").fadeOut('slow', function() {

      $("#content div").fadeIn('slow');

    });

  });
</script>

<html>
  <div id="content">
    <div></div>
    <img src="loader.gif" />
  </div>
</html>

就我而言,加载函数内部的内容应该在加载 file.html 之后发生,但它隐藏了加载器图像并显示内容 div(在本例中是巨大的图像,但它可以是任何东西) )并且它仍然加载此内容 - 加载过程尚未完成。谢谢。

最佳答案

描述

因为 .load() 使用 ajax,所以显示“正在加载”指示器的正确方法是使用 jQuery 的 ajaxStartajaxComplete 事件.

jQuery.ajaxStart() Register a handler to be called when the first Ajax request begins. This is an Ajax Event.

jQuery.ajaxComplete() Register a handler to be called when Ajax requests complete. This is an Ajax Event.

示例

$(document).ajaxStart(function() {
     $("#loader").show();
});

$(document).ajaxComplete(function() {
     $("#loader").fadeOut('slow');
});

更多信息

关于jquery - 显示加载程序时预加载 div 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9177511/

相关文章:

html - 如何在 Ruby on Rails 应用程序中更改 Index.html 的头部部分?

sqlite - 如何找到使用 HTML5 创建的数据库的位置?

javascript - phonegap Android 中的 pdf 查看器

预加载谷歌字体。尽管使用了跨域属性,但仍收到控制台警告

javascript - Web Workers 和图像预加载

javascript - document.execCommand ("paste") 不执行

javascript - JQuery 样式和 Ajax 在新主机上无法正常工作

jquery - 数据库查询中如何进行数学运算?

javascript - 在 getorgchart jquery 插件中如何删除屏幕底部的 getorgchart 超链接

javascript - 预加载将在 Fabric.js Canvas 上绘制的图像