Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I wasn't able to solve the issue of using <code>onProgress</code> on the compressed content itself, but I came up with this semi-simple workaround. <strong>In a nutshell</strong>: send a <code>HEAD</code> request to the server at the same time as a <code>GET</code> request, and render the progress bar once there's enough information to do so.</p> <hr> <pre><code>function loader(onDone, onProgress, url, data) { // onDone = event handler to run on successful download // onProgress = event handler to run during a download // url = url to load // data = extra parameters to be sent with the AJAX request var content_length = null; self.meta_xhr = $.ajax({ url: url, data: data, dataType: 'json', type: 'HEAD', success: function(data, status, jqXHR) { content_length = jqXHR.getResponseHeader("X-Content-Length"); } }); self.xhr = $.ajax({ url: url, data: data, success: onDone, dataType: 'json', progress: function(jqXHR, evt) { var pct = 0; if (evt.lengthComputable) { pct = 100 * evt.position / evt.total; } else if (self.content_length != null) { pct = 100 * evt.position / self.content_length; } onProgress(pct); } }); } </code></pre> <p>And then to use it:</p> <pre><code>loader(function(response) { console.log("Content loaded! do stuff now."); }, function(pct) { console.log("The content is " + pct + "% loaded."); }, '&lt;url here&gt;', {}); </code></pre> <hr> <p>On the server side, set the <code>X-Content-Length</code> header on both the <code>GET</code> and the <code>HEAD</code> requests (which should represent the <em>uncompressed</em> content length), and abort sending the content on the <code>HEAD</code> request. </p> <p>In PHP, setting the header looks like:</p> <pre><code>header("X-Content-Length: ".strlen($payload)); </code></pre> <p>And then abort sending the content if it's a <code>HEAD</code> request:</p> <pre><code>if ($_SERVER['REQUEST_METHOD'] == "HEAD") { exit; } </code></pre> <hr> <p>Here's what it looks like in action:</p> <p><img src="https://i.stack.imgur.com/UkqS8.png" alt="screenshot"></p> <p>The reason the <code>HEAD</code> takes so long in the below screenshot is because the server still has to parse the file to know how long it is, but that's something I can definitely improve on, and it's definitely an improvement from where it was.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload