Question

这似乎是回答问题的百倍，但我找不到一个有效的解决方案。

我有这段代码：

<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之后的内容应该在加载file.html之后发生，但它隐藏了加载器图像并显示内容div（在这种情况下是巨大的图像，但它可以是任何东西））它仍然加载此内容 - 加载过程尚未完成。感谢。

Answer 1

描述

由于.load()使用ajax，因此显示“加载”指示符的正确方法是使用jQuery的ajaxStart和ajaxComplete事件。

jQuery.ajaxStart（）注册第一个Ajax请求开始时要调用的处理程序。这是一个Ajax事件。

jQuery.ajaxComplete（）注册Ajax请求完成时要调用的处理程序。这是一个Ajax事件。

示例

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

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

更多信息

Answer 2

我使用以下库。我不记得我从哪里拿过它。

    /* Image loader */
    function addListener(element, type, expression, bubbling) {
        bubbling = bubbling || false;
        if (window.addEventListener) { // Standard
            element.addEventListener(type, expression, bubbling);
            return true;
        } else if (window.attachEvent) { // IE
            element.attachEvent('on' + type, expression);
            return true;
        } else return false;
    }


    var ImageLoader = function (url) {
        this.url = url;
        this.image = null;
        this.loadEvent = null;
    };

    ImageLoader.prototype = {
        load: function () {
            this.image = document.createElement('img');
            var url = this.url;
            var image = this.image;
            var loadEvent = this.loadEvent;
            addListener(this.image, 'load', function (e) {
                if (loadEvent != null) {
                    loadEvent(url, image);
                }
            }, false);
            this.image.src = this.url;
        },
        getImage: function () {
            return this.image;
        }
    };
    /* End of image loader */

包含上述脚本。然后你可以按如下方式使用它。

var loader = new ImageLoader("/Path/MyImage.jpg");
// define your 'onreadystatechange'
loader.loadEvent = function(url, imageAsDom) {
    // do what you need
}
loader.load();

Answer 3

Loader需要是一个id，但这是格式化代码的更好方法。

<html>
  <head>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $("#content div").hide();
      $("#loader").show();

      $("#content div").load("file.html", function () {
        $("#loader").fadeOut('slow', function() {
          $("#content").fadeIn('slow');
        });
      });
    });
  </script>  
  </head>
  <div id="wrapper">
    <img id="loader" src="loader.gif" />
    <div id="content"></div>
  </div>
</html>

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

3 个答案:

描述

示例

更多信息