fullImage turns image blank in iOS

[guircoelho]

Hello everyone.

Just noticed the fullImage, when loaded, turns the image blank in iOS. While in Android, the image loads in the background, just becoming visible when it's done.

Is there any workaround? I'm using the Pro version.

Thanks in advance!

[drozhzhin-n-e]

@guircoelho I will fix this in the next version, thanks for reporting.

[guircoelho]

Hey @drozhzhin-n-e !

I think me and @robjava have a solution. Plus we implemented two new events: startLoadingFullImage and loadedFullImage.

Below is the entire replaceImagePath method:

replaceImagePath() { let minScale = this.properties.fullImage.minScale;

    if (minScale) {
        if (this.scale < minScale) {
            return;
        }
    }

    if (!minScale && this.properties.limitZoom === "original image size") {
        if (this.scale < this.maxScale) {
            return;
        }
    }

    let img;
    let imgTemp;

    if (this.elementTarget === "IMG") {
        img = this.element.getElementsByTagName("img")[0];
        imgTemp = new Image();

        if (img.src !== this.properties.fullImage.path) {
            this.emitEvent({
                name: 'startLoadingFullImage',
                detail: {
                    url: img.src,
                    fullImagePath: this.properties.fullImage.path
                }
            });
            imgTemp.src = this.properties.fullImage.path;

            var _self = this;
            imgTemp.onload = function(){
              _self.emitEvent({
                  name: 'loadedFullImage',
                  detail: {
                      url: img.src,
                      fullImagePath: _self.properties.fullImage.path
                  }
              });

              img.src = _self.properties.fullImage.path;
            };
            this.pollLimitZoom();
        }
    }
}

[drozhzhin-n-e]

@guircoelho Cool! I will study this solution soon.

[drozhzhin-n-e]

@guircoelho Everything works great. I finalized your changes, now the maximum scale is redefined after loading the image.

replaceImagePath() {
    let minScale = this.properties.fullImage.minScale;

    if (minScale) {
        if (this.scale < minScale) {
            return;            
        }
    }

    if (!minScale && this.properties.limitZoom === "original image size") {
        if (this.scale < this.maxScale) {
            return;
        }
    }

    let img;
    let imgTemp;

    if (this.elementTarget === "IMG") {
        img = this.element.getElementsByTagName("img")[0];
        imgTemp = new Image();

        if (img.src !== this.properties.fullImage.path) {
            this.emitEvent({
                name: 'startLoadingFullImage',
                detail: {
                    url: img.src,
                    fullImagePath: this.properties.fullImage.path
                }
            });

            imgTemp.src = this.properties.fullImage.path;
            imgTemp.onload = () => {
                this.emitEvent({
                    name: 'loadedFullImage',
                    detail: {
                        url: img.src,
                        fullImagePath: this.properties.fullImage.path
                    }
                });

                img.src = this.properties.fullImage.path;
                this.pollLimitZoom();
            };
        }
    }
}