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
Downloading images from server in the background, while script is running Beginners	1	229	November 16, 2021
React and P5 problem with loadSound and loadImage Libraries	1	920	December 22, 2020
Why is p5.js preload so slow? Libraries	3	1603	June 29, 2019
Loading bar for loading image Coding Questions	13	189	July 16, 2024
Loading screen with preload Coding Questions	16	1053	September 22, 2022

Where is the `whileLoadingCallback` for images?

Related topics