Web Bae•7mo ago

imagesLoaded not recognizing images in <canvas> element

@Web Bae Continuing from the question I posed on your YouTube video for creating a real progress indicator, I've added a Codepen link with the code in the JS section. It is from one of Timothy Ricks' tutorials for creating a PNG sequence that is tied to a GSAP ScrollTrigger animation. So I'm not sure exactly why the browser wouldn't recognize the images for the imagesLoaded library. https://codepen.io/mikelee22/pen/GRamWzM

Michael

CodePen

GRamWzM

...

2 Replies

Web Bae•7mo ago

Hey @Michael Lee - the codepen doesn't work because there's no html to look at and the gsap library isn't loaded. I gather you copy/pasted the JS from somewhere. Because of this, I cannot test and changes, but my guess is that all the images aren't loaded because the code only waits for the first image to load. imagesLoaded isn't working with this because you are creating the images programatically with JS after the DOM has been parsed. The images don't exist in the DOM that comes from the server, so imagesLoaded has no way of knowing about them. This is where you are creating the images:

  for (let i = 0; i < frameCount; i++) {
    const img = new Image();
    img.src = currentFrame(i);
    images.push(img);
  }

  for (let i = 0; i < frameCount; i++) {
    const img = new Image();
    img.src = currentFrame(i);
    images.push(img);
  }

Here's more info on the Image() constructor: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement The code only waits for the first image onload event to fire. images[0].onload = render; This line of code executes the render function when the first image onload event fires. I would think you would want to wait for ALL images onload to fire or something like that. Something like this: https://chatgpt.com/share/c9066288-14c6-46bd-b7f6-b2f9e492ab19

MDN Web Docs

HTMLImageElement - Web APIs | MDN

The HTMLImageElement interface represents an HTML element, providing the properties and methods used to manipulate image elements.

ChatGPT

A conversational AI system that listens, learns, and challenges

Web Bae•7mo ago

If I get time, I can try to create a full example as I think this is some good content but I'm pretty busy these days. Keep in mind that Patreon subscribers do get priority support! https://patreon.com/webbae

Gaming

Programming

imagesLoaded not recognizing images in <canvas> element