在使用jquery

Question

请点击链接时在div上加载页面内容，以便运行此代码：

$(document).ready(function(){
    //loading the default content
    $('#content').load('contents/index.php');

    //loading page content of a clicked link
    $('#nav a').click(function(){
        page = $(this).attr('href');
        $('#content').load('content/'+page);
        return false;
    });
});

现在我需要在内容加载之前添加加载图像，就像ajax

一样

beforeSend: function(){
    $('#load_div').html('<img src="loading_image.gig" />');
},

在加载内容后停止图像

success: function(){
    $('#load_div').html();
},

那我该怎么做呢？

Answer 1

您可以使用ajaxStart()方法在.load(url, fn)中使用回调：

function ajaxDone(){
   // remove the loading image here
   $('#load_div').html(''); // .empty(); // can also be used
}

$(document).ready(function(){
    //loading the default content
    $('#content').load('contents/index.php', ajaxDone); //<---use here to remove

    //loading page content of a clicked link
    $('#nav a').click(function(){
        page = $(this).attr('href');
        $('#content').load('content/'+page, ajaxDone); //<---use here to remove
        return false;
    });

    /*
     * Here you can use ajaxStart globaly when you have any async ajax call
     * It will show a loading gif image.
     */
    $(document).ajaxStart(function(){
        $('#load_div').html('<img src="loading_image.gig" />');
    });

});

Answer 2

我的解决方案与Jai的解决方案非常相似，只是我使用的是加载器标签而不是图像，它会暂时使屏幕变黑。我在this Codepen有一个完整的演示版，但下面的代码应该运行得很好。

我利用文档ajaxSend和ajaxComplete全局事件，因此这些事件现在将针对 任何 $.ajax()请求触发，除非你在调用中指定不触发ajax事件。

＆＃13;

＆＃13;

$(document).ready(function() {
  $(document).on('ajaxSend', function(e) {

    if ($('.loader-wrapper').length == 0) {
      var loader_wrapper = $('<div class="loader-wrapper"><div class="loader">&nbsp;</div></div>');
      console.log(loader_wrapper);
      $(document.body).prepend(loader_wrapper);
    }

    $('.loader-wrapper').show();

  }).on('ajaxComplete', function() {
    $('.loader-wrapper').hide();
  })

  $('#click-me').on('click', function() {
    $('#results').load('http://codepen.io/jhechtf/pen/XdQdaN.html');
  });
});

＆＃13;

.loader-wrapper {
  overflow: none;
  position: absolute;
  margin: auto auto;
  bottom: 0;
  right: 0;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.loader {
  margin: auto auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(0, 0, 0, 0.2);
  border-right: 1.1em solid rgba(0, 0, 0, 0.2);
  border-bottom: 1.1em solid rgba(0, 0, 0, 0.2);
  border-left: 1.1em solid #000;
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
.loader {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results">
  Post stuff here
</div>
<button id="click-me">Click me</button>

＆＃13;

＆＃13;

＆＃13;