Indication of progress in downloading pages



  • How do we calculate the download of the site? I saw the download status on the sites, I know that XMLHtpRequest has an upload.onprogress event to download. server:

    XMLHttpRequest.upload.onprogress = function(event) {
      console.log( 'Загружено на сервер ' + event.loaded + ' байт из ' + event.total );
    } 
    

    How to do the same, but for downloading pages/data server?



  • var oReq = new XMLHttpRequest();
    
    oReq.addEventListener("progress", updateProgress);
    oReq.addEventListener("load", transferComplete);
    oReq.addEventListener("error", transferFailed);
    oReq.addEventListener("abort", transferCanceled);
    
    oReq.open();
    
    // ...
    
    // progress on transfers from the server to the client (downloads)
    function updateProgress (oEvent) {
      if (oEvent.lengthComputable) {
        var percentComplete = oEvent.loaded / oEvent.total;
        // ...
      } else {
        // Unable to compute progress information since the total size is unknown
      }
    }
    
    function transferComplete(evt) {
      console.log("The transfer is complete.");
    }
    
    function transferFailed(evt) {
      console.log("An error occurred while transferring the file.");
    }
    
    function transferCanceled(evt) {
      console.log("The transfer has been canceled by the user.");
    }
    

    http://jsfiddle.net/GvdSy/

    JQuery:

    $.ajax({
    
    type: 'POST',
    url: "/",
    data: {},
    beforeSend: function(XMLHttpRequest)
    {
        // прогресс загрузки на сервер
        XMLHttpRequest.upload.addEventListener("progress", function(evt){
            if (evt.lengthComputable) {  
                var percentComplete = evt.loaded / evt.total;
                // делать что-то...
            }
        }, false);
        // прогресс скачивания с сервера
        XMLHttpRequest.addEventListener("progress", function(evt){
            if (evt.lengthComputable) {  
                var percentComplete = evt.loaded / evt.total;
                // делать что-то...
            }
        }, false);
    },
    success: function(data){
        // делать что-то при успешном завершении...
    }
    

    });




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2