Ajax队列加载图标

Question

我正在使用以下代码来排队ajax请求，以便不会阻塞页面上的操作。问题是，我需要显示一个加载图标来指示队列的执行未完成。我无法想出如何做到这一点，我尝试过的所有方法都会立即关闭。

  // jQuery on an empty object, we are going to use this as our Queue
  var ajaxQueue = $jq({});

  $jq.ajaxQueue = function( ajaxOpts ) {
    var jqXHR,
        dfd = $jq.Deferred(),
        promise = dfd.promise();

    // queue our ajax request
    ajaxQueue.queue( doRequest );

    // add the abort method
    promise.abort = function( statusText ) {
        // proxy abort to the jqXHR if it is active
        if ( jqXHR ) {
            return jqXHR.abort( statusText );
        }
        // if there wasn't already a jqXHR we need to remove from queue
        var queue = ajaxQueue.queue(),
            index = $jq.inArray( doRequest, queue );

        if ( index > -1 ) {
            queue.splice( index, 1 );
        }
      // and then reject the deferred
      dfd.rejectWith( ajaxOpts.context || ajaxOpts,
            [ promise, statusText, "" ] );
      return promise;
    };

    // run the actual query
    function doRequest( next ) {
        jqXHR = $jq.ajax( ajaxOpts )
            .done( dfd.resolve )
            .fail( dfd.reject )
            .then( next, next );
    }
    return promise;
};  

- user1641940

Answer 1

你可以在页面上创建一个div来容纳你的图标。 在这种情况下，我会使用一个加载gif图标。 当你第一次在页面上触发ajax时，使用.show()来显示它， 然后在你的.done里面使用.hide()。

类似于这篇文章如何在整个HTML页面加载完成之前显示加载gif图像。

- prola