Where is the `whileLoadingCallback` for images?

Errorbot1122 · December 19, 2021, 9:26pm

Where is the whileLoadingCallback for images? I know p5 has one for sound, but not images for some reason…

Well, you know what, if you’re going to add on for images, what about adding them for tables or XML Files, etc.

GoToLoop · December 20, 2021, 12:00am

p5.js-sound is a separate library which although is bundled w/ p5.js we still need to load it as an addon.

p5.js-sound relies on XMLHttpRequest to load sound files:

processing/p5.js-sound/blob/v1.0.1/src/soundfile.js#L226-L233


      
          var request = new XMLHttpRequest();
          request.addEventListener(
            'progress',
            function (evt) {
              self._updateProgress(evt);
            },
            false
          );

And it happens that it has a builtin triggered event for loading progress:

Main library p5.js used XMLHttpRequest in the past; but now it relies on the Fetch API instead via its method httpDo():

github.com

processing/p5.js/blob/v1.4.0/src/io/files.js#L1103-L1106


      
          } else {
            promise = fetch(request);
          }
          promise = promise.then(res => {

However the Fetch API doesn’t have a straight progress event like its XMLHttpRequest predecessor.

Nevertheless there are some hacks to emulate the loading progress feature:

github.com

AnthumChris/fetch-progress-indicators/blob/master/fetch-basic/supported-browser.js

'use strict'

const elProgress = document.getElementById('progress');

status('downloading with fetch()...');
fetch('https://fetch-progress.anthum.com/30kbps/images/sunrise-baseline.jpg')
.then(response => {
  if (!response.ok) {
    throw Error(response.status+' '+response.statusText)
  }

  if (!response.body) {
    throw Error('ReadableStream not yet supported in this browser.')
  }

  // to access headers, server must send CORS header "Access-Control-Expose-Headers: content-encoding, content-length x-file-size"
  // server must send custom x-file-size header if gzip or other content-encoding is used
  const contentEncoding = response.headers.get('content-encoding');
  const contentLength = response.headers.get(contentEncoding ? 'x-file-size' : 'content-length');
  if (contentLength === null) {

This file has been truncated. show original

You may attempt to request the p5js devs to include some fetch() progress hack into its loading functions:

But have in mind that even when p5.js used to rely on XMLHttpRequest back then they opted not to have any progress loading callback.

Topic		Replies	Views
React and P5 problem with loadSound and loadImage Libraries	1	871	December 22, 2020
Why is p5.js preload so slow? Libraries	3	1572	June 29, 2019
Looking for help downloading from editor with interactive sketch Libraries	2	695	May 9, 2020
How to get a folder fileList? p5.js	6	3733	June 24, 2018
When will someone recreate some P5 functions with PROMISES Libraries	0	244	January 10, 2022

Where is the `whileLoadingCallback` for images?

Related Topics