Limits of preload() with cross‑origin HTTPS images that trigger certificate errors

Answer the Question First

When a sketch served over HTTPS asks p5.js to preload an image from another HTTPS origin that presents a self‑signed, expired, or otherwise invalid certificate, the browser aborts the TLS handshake before any bytes are sent. In that situation the loadImage() call that underlies preload() will trigger its error event. If you supply an error callback to preload(), that callback runs immediately, and setup() is still called because preload() considers the task finished—just not successfully.

What Happens When No Error Callback Is Provided?

Without an explicit error handler, the image element still fires the error event, but p5.js simply marks the preload task as done with a null value. There is no built‑in timeout; the browser does not wait indefinitely. The setup() function runs as soon as all preload tasks report either success or failure.

Does the p5.js Web Editor CDN Fallback Influence This?

The CDN fallback only affects the delivery of the p5.js library itself. It does not alter the network stack that fetches external images. Therefore, a certificate error on the image’s origin behaves the same whether you load p5.js from the CDN or locally.

How to Verify the Behavior

1. Open DevTools and go to the Network panel. Filter for the image URL. The status should be 0 and the console will show something like Failed to preload image: net::ERR_CERT_INVALID.
2. Run curl -v https://bad‑cert.example.com/image.png from a terminal to confirm the TLS handshake fails and to capture the exact error string.
3. In your sketch, add an error callback:

   function preload() {
     img = loadImage('https://bad‑cert.example.com/image.png',
       () => console.log('loaded'),
       (err) => console.error('preload error', err)
     );
   }

   and observe that the error callback fires.

What to Do If You Need a Fallback Image

• Provide a second loadImage() call inside the error callback to load a trusted placeholder.
• Set image.onerror = () => {/* fallback logic */} if you prefer native image events.