Avif, webp custom content works incorrectly: it still loads original jpg

[theusualberliner]

Hello!

I'm creating a gallery of responsive images using picture, source and img and I'd like to use the same in photoswipe. The issue which I have is that photoswipe preloads original jpg files when moving to the next/previous slide, or in case of this example - when you open first picture: https://photoswipe.com/custom-content. Also if you open a picture and then close it, webp image is loaded on open, and on slide closing jpg image is loaded.

In my example it looks like this: when I navigate to 3rd image, it loads first image in jpg and then, as I proceed further, it keeps loading avif and jpg.

Code snippets:

dataSource: images.map((image, index) => {
        return {
          src: image.url,
          sources: image.sources,
          thumbnailUrl: image.thumbnailUrl,
          width: image.width,
          height: image.height,
          alt: "",
        };
      }),

lightbox.on("contentLoad", (e) => {
      const { content, isLazy } = e;
      console.log(content);

      if (content.data.sources) {
        e.preventDefault();

        content.pictureElement = document.createElement("picture");

        for (const source of content.data.sources) {
          const sourceElement = document.createElement("source");
          sourceElement.srcset = source.srcset;
          sourceElement.type = source.type;
          content.pictureElement.appendChild(sourceElement);
        }

        content.element = document.createElement("img");
        content.element.src = content.data.src;
        content.element.setAttribute("loading", "lazy");
        content.element.setAttribute("alt", "");
        content.element.className = "pswp__img";
        content.pictureElement.appendChild(content.element);

        content.state = "loading";

        if (content.element.complete) {
          content.onLoaded();
        } else {
          content.element.onload = () => {
            content.onLoaded();
          };

          content.element.onerror = () => {
            content.onError();
          };
        }
      }
    });

    lightbox.on("contentAppend", (e) => {
      const { content } = e;
      if (content.pictureElement && !content.pictureElement.parentNode) {
        e.preventDefault();
        content.slide.container.appendChild(content.pictureElement);
      }
    });

    lightbox.on("contentRemove", (e) => {
      const { content } = e;
      if (content.pictureElement && content.pictureElement.parentNode) {
        e.preventDefault();
        content.pictureElement.remove();
      }
    });

[Dominic-Marcelino]

Running into a similar issue. After further debugging it seems that photoswipe still requests the jpeg while the contentRemove event 🤔 Did you found any solution?

[semaf]

Seems that the issue has not been solved. According to the code it should also create the element which does not.