Webp custom content loads JPG on remove()

[pierreleripoll]

When using webp picture solution as presented here : https://photoswipe.com/custom-content/#using-webp-image-format You can observe closing photoswipe triggers the loading of jpg image, eg : open the first mountain image, then watch network in dev tools while closing photoswipe, you will see that the jpg version of the image is requested on closing

I managed to resolve the problem my modifying remove() functions in both photoswipe-lightbox.esm.js and photoswipe.esm.js adding this : if (this.element && this.element.parentNode && !this.pictureElement) { this.element.remove(); } if (this.pictureElement && this.pictureElement.parentNode) { this.pictureElement.remove(); } in both functions But this is not the cleanest way to do it I suppose, I know the "real" picture feature is being developed, but until then if some people want to use my dirty fix here it is

[michaelkhabarov]

Another dirty fix without modifying source files:

    photoswipe.on("destroy", function () {
      this.mainScroll.itemHolders.forEach((itemHolder) => {
        const content = itemHolder.slide?.content
        if (content?.pictureElement) content.element = content.pictureElement
      })
    })

Not sure if this have any side effects

[Dominic-Marcelino]

Saving the pictureElement in the contentElement as mentioned by @michaelkhabarov doesn't solves the problem in our project. The destroy/remove action still loads the jpeg version.

Is there any known solution?

UPDATE Turns out I need to update the contentElement both on destroy and on contentRemove.

lightbox.on('destroy', (e) => {
    lightbox.pswp.mainScroll.itemHolders.forEach((itemHolder) => {
      const content = itemHolder.slide?.content;
      if (content?.pictureElement) {
        content.element = content.pictureElement;
      }
    });
  });
  lightbox.on('contentRemove', (that) => {
    const pictureElement = that.content?.pictureElement;
    if (pictureElement) {
      that.content.element = pictureElement;
    } 
  });