阿賈克斯加載欄功能

我知道有一些關於此的帖子，但他們不包括我需要實現的。阿賈克斯加載欄功能

我試圖讓youtubelike加載欄正常工作。

，我發現這一點：

var data = []; 
for (var i = 0; i < 100000; i++) { 
    var tmp = []; 
    for (var i = 0; i < 100000; i++) { 
     tmp[i] = 'hue'; 
    } 
    data[i] = tmp; 
}; 

     xhr: function() { 
       var xhr = new window.XMLHttpRequest(); 
       var percentComplete = 0; <--------------------------added this 
       $('.progress').removeClass('hide');<----------------and this 
       xhr.upload.addEventListener("progress", function (evt) { 
        if (evt.lengthComputable) { 
         var percentComplete = evt.loaded/evt.total; 
         console.log(percentComplete); 
         $('.progress').css({ 
          width: percentComplete * 100 + '%' 
         }); 
         if (percentComplete === 1) { 
          $('.progress').addClass('hide'); 
         } 
        } 
       }, false); 
       xhr.addEventListener("progress", function (evt) { 
        if (evt.lengthComputable) { 
         var percentComplete = evt.loaded/evt.total; 
         console.log(percentComplete); 

         $('.progress').css({ 
          width: percentComplete * 100 + '%' 
          }); 
        } 
       }, false); 
       return xhr; 
      }

我加入了2條線，因爲隨着完成後不刪除隱藏的價值，將只能使用一次。也把寬度恢復爲0.我也喜歡這個事實，它接縫計算事件的真實百分比。

這很好。 Howerver，我希望把它變成一個可以被稱爲像這樣我所有的Ajax調用函數：

$(document).ready(function() { 
    $("a").on("click", function (event) { 
     event.preventDefault(); 
     var id = ($(this).attr("id")); 
     var container = ($(this).attr("data-container")); 
     var link = ($(this).attr("href")); 
     var text = ($(this).text()); 
     var html = ($(this).html()); 
     MY_LOADING_BAR_FUNCTION();<-----------------------------------Here i guess? 
     $.ajax({ 

      url: 'ajax-php.php', 
      type: 'post', 
      data: { 'action': 'click', 'id': id, 'text': text, 'link': link, 'html': html }, 
      success: function (data, status) { 
       if (container == '#formbox') { 
        $("#screen").addClass("visible"); 
       } 
       $(container).html(data); 
      }, 
      error: function (xhr, desc, err) { 
       console.log(xhr); 
       console.log("Details: " + desc + "\nError:" + err); 
      } 
     }); // end ajax call 
    }); // end on click 
}); // en document ready

，但我也跨越Ajax的設置看起來像這樣跑了。

$.ajaxSetup({ 
    beforeSend: function() { 

    }, 
    complete : function() { 

    } 
});

現在我得到它通過將xhr: function()的整個代碼我Ajax調用內工作。但我不想每次都這麼做。

所以這些是我發現可以工作的2個選項，但我不能讓他們以我想要的方式工作。我嘗試製作一個MY_LOADING_BAR_FUNCTION()但我收到了一個不推薦的錯誤。

任何人都可以告訴我如何使這項工作，請。

謝謝大家！

來源

2016-01-14 MadeInDreams

Like youtube？這不是一個單一的請求。這是很多要求。首先，所有請求都應該添加到「隊列」中。成功後，每個請求應更新加載欄。爲了改進，您可以設置每個請求的百分比權重。 – Deep

呵呵不！這是一個單一的請求發送一個JSON數組到一個PHP文件！？ – MadeInDreams

回覆遲，但它的價值分享一些知識，所以其他人可能會從中獲得幫助。

您可以擴展jQuery AJAX XHR對象，如下所示。

jQuery.ajaxSettings.xhr = function() 
{ 
    var xhr = new window.XMLHttpRequest(); 
    //Upload progress 
    xhr.upload.addEventListener("progress", function (evt) { 
     if (evt.lengthComputable) { 
      var percentComplete = evt.loaded/evt.total; 
      //Do something with upload progress 
      console.log('percent uploaded: ' + (percentComplete * 100)); 
     } 
    }, false); 
    //Download progress 
    xhr.addEventListener("progress", function (evt) { 
     if (evt.lengthComputable) { 
      var percentComplete = evt.loaded/evt.total; 
      //Do something with download progress 
      console.log('percent downloaded: ' + (percentComplete * 100)); 
     } 
    }, false); 
    return xhr; 
}

來源

2016-06-30 10:29:07 Usman

阿賈克斯加載欄功能

回答

相關問題