[Help]: Issue lazy load image with Safari iOS

[nambui1998]

Summary

Hi can you help me look into the slow loading issue when I load the page or change the product slide some images are not loaded at the correct size resulting in broken height on iOS Safari browser?

If applicable, which variants of Embla Carousel are relevant to this question?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

// Slider.
class StrongSlider extends HTMLElement {
	constructor() {
		super();
	}

	connectedCallback() {
		this.slider         = null;
		this.thumbSlider    = null;
		this.options        = this.querySelector( '[data-options]' );
		this.thumbOptions   = this.querySelector( '[data-thumbs-options]' );
		this.viewport       = this.querySelector( '.strong-slider-viewport' );
		this.thumbsViewport = this.querySelector( '.strong-thumbs-slider-viewport' );

		this.init();
		document.addEventListener( 'shopify:section:load', () => this.init( event ) );
		document.addEventListener( 'shopify:section:select', () => this.init( event ) );
		document.addEventListener( 'shopify:block:select', () => this.init( event ) );
		document.addEventListener( 'product-variant-updated', () => this.scroolTo( event ) );
		document.addEventListener( 'product-quick-viewed', () => this.scroolTo( event ) );
	}

	scroolTo( e ) {
		let gallery = this.classList.contains( 'product-gallery-slider' );

		if ( ! gallery ) {
			return
		}

		this.slider.scrollTo( e.detail.selected.featured_media.position - 1, 600 );
	}

	toggleArrows( bsSlider, prevBtn, nextBtn ) {
		const arrowState = () => {
			bsSlider.canScrollPrev() ? prevBtn.removeAttribute( 'disabled' ) : prevBtn.setAttribute( 'disabled', 'disabled' );
			bsSlider.canScrollNext() ? nextBtn.removeAttribute( 'disabled' ) : nextBtn.setAttribute( 'disabled', 'disabled' );
		}

		bsSlider.on( 'select', arrowState ).on( 'init', arrowState ).on( 'reInit', arrowState );

		return () => prevBtn.removeAttribute( 'disabled' ), nextBtn.removeAttribute( 'disabled' );
	}

	addArrows( bsSlider, prevBtn, nextBtn ) {
		const scrollPrev = () => bsSlider.scrollPrev();
		const scrollNext = () => bsSlider.scrollNext();

		prevBtn.addEventListener( 'click', scrollPrev, false );
		nextBtn.addEventListener( 'click', scrollNext, false );

		const removeTogglePrevNextBtnsActive = this.toggleArrows( bsSlider, prevBtn, nextBtn );

		return () => {
			removeTogglePrevNextBtnsActive();

			prevBtn.removeEventListener( 'click', scrollPrev, false );
			nextBtn.removeEventListener( 'click', scrollNext, false );
		}
	}

	addDots( bsSlider, dotsNode ) {
		let dotNodes = [];

		const addDotHandle = () => {
			dotsNode.innerHTML = bsSlider.scrollSnapList().map( () => '<span class="strong-dot"></span>' ).join( '' );

			dotNodes = dotsNode.querySelectorAll( '.strong-dot' );

			dotNodes.forEach( ( dotNode, index ) => dotNode.addEventListener( 'click', () => bsSlider.scrollTo( index ), false ) );
		}

		const toggleDot = () => {
			const previous = bsSlider.previousScrollSnap();
			const selected = bsSlider.selectedScrollSnap();

			dotNodes[previous].classList.remove( 'selected' );
			dotNodes[selected].classList.add( 'selected' );
		}

		bsSlider
			.on( 'init', addDotHandle )
			.on( 'reInit', addDotHandle )
			.on( 'init', toggleDot )
			.on( 'reInit', toggleDot )
			.on( 'select', toggleDot );

		return () => dotsNode.innerHTML = '';
	}

	addThumbBtnsClickHandlers( bsSlider, bsThumbSlider ) {
		const slidesThumbs = bsThumbSlider.slideNodes();

		const scrollToIndex = slidesThumbs.map( ( _, index ) => () => bsSlider.scrollTo( index ) );

		slidesThumbs.forEach( ( slideNode, index ) => slideNode.addEventListener( 'click', scrollToIndex[index], false ) );

		return () => slidesThumbs.forEach( ( slideNode, index ) => slideNode.removeEventListener( 'click', scrollToIndex[index], false ) );
	}

	addToggleThumbBtnsActive( bsSlider, bsThumbSlider ) {
		const slidesThumbs = bsThumbSlider.slideNodes()

		const toggleThumbBtnsState = () => {
			bsThumbSlider.scrollTo( bsSlider.selectedScrollSnap() );

			const previous = bsSlider.previousScrollSnap();
			const selected = bsSlider.selectedScrollSnap();

			slidesThumbs[previous].classList.remove( 'selected' );
			slidesThumbs[selected].classList.add( 'selected' );
		}

		bsSlider.on( 'select', toggleThumbBtnsState );
		bsThumbSlider.on( 'init', toggleThumbBtnsState );

		return () => {
			const selected = bsSlider.selectedScrollSnap();

			slidesThumbs[selected].classList.remove( 'selected' );
		}
	}

	addLazyLoad( bsSlider ) {
		const imagesLoaded = new Set();
		const slideNodes   = bsSlider.slideNodes();

		const loadImage = (index) => {
			if ( imagesLoaded.has( index ) ) {
				return;
			}

			const slideNode = slideNodes[index];
			const imageNode = slideNode?.querySelector( '.strong-slider-lazy-load-img' );
			if ( ! imageNode ) {
				return;
			}

			const src = imageNode.getAttribute( 'data-src' );
			if ( ! src ) {
				return;
			}

			imageNode.src = src;
			imagesLoaded.add( index );

			const onLoad = () => {
				imageNode.removeEventListener( 'load', onLoad );
				slideNode.classList.add( 'strong-slider-lazy-load-has-loaded' );

				// When the image has finished loading, update the height.
				requestAnimationFrame(() => {
					bsSlider.reInit();
					bsSlider.emit( 'resize' )
				});
			};

			const tryLoad = () => {
				if (imageNode.complete && imageNode.naturalHeight > 0) {
					requestAnimationFrame(onLoad);
				} else {
					imageNode.addEventListener('load', onLoad, { once: true });
					if (imageNode.decode) {
						imageNode.decode().then(onLoad).catch(() => {});
					}
				}
			};

			setTimeout(tryLoad, 1000);
		};

		const loadImagesInView = () => {
			const indexes = bsSlider.slidesInView( true );
			indexes.forEach( loadImage );
		};

		const checkAndEmitResize = () => {
			const index = bsSlider.selectedScrollSnap();
			if ( ! imagesLoaded.has( index ) ) {
				loadImage( index ); // Ensure the image is loaded.
			} else {
				// In case the image has finished loading but the height has not been updated.
				requestAnimationFrame(() => bsSlider.emit('resize'));
			}
		};

		loadImagesInView();

		bsSlider.on( 'init', loadImagesInView );
		bsSlider.on( 'reInit', loadImagesInView );
		bsSlider.on( 'slidesInView', loadImagesInView );
		bsSlider.on( 'select', checkAndEmitResize );

		return () => {};
	}

	// Lazy load for thumbnails.
	addLazyLoadForThumbnails( bsSlider ) {
		const imagesLoaded    = new Set();
		const thumbSlideNodes = this.thumbSlider.slideNodes();

		const loadThumbnailImage = (index) => {
			if ( imagesLoaded.has( index ) ) {
				return;
			}

			const slideNode = thumbSlideNodes[index];
			const imageNode = slideNode?.querySelector( '.strong-slider-lazy-load-img' );

			if ( ! imageNode ) {
				return;
			}

			const src = imageNode.getAttribute( 'data-src' );
			if ( ! src ) {
				return;
			}

			imageNode.src = src;
			imagesLoaded.add( index );

			const onLoad = () => {
				imageNode.removeEventListener( 'load', onLoad );
				slideNode.classList.add( 'strong-slider-lazy-load-has-loaded' );

				// Reinitialize the slider and emit a resize event to adjust its height.
				requestAnimationFrame(() => {
					bsSlider.reInit();
					bsSlider.emit( 'resize' );
				});
			};

			const tryLoad = () => {
				if (imageNode.complete && imageNode.naturalHeight > 0) {
					requestAnimationFrame(onLoad);
				} else {
					imageNode.addEventListener('load', onLoad, { once: true });
					if (imageNode.decode) {
						imageNode.decode().then(onLoad).catch(() => {});
					}
				}
			};

			setTimeout(tryLoad, 1000);
		};

		// Load all images that are in the viewport (or near it).
		const loadThumbnailsInView = () => {
			const indexes = this.thumbSlider.slidesInView( true );
			indexes.forEach( loadThumbnailImage );
		};

		const checkAndEmitResize = () => {
			const index = this.thumbSlider.selectedScrollSnap();
			if ( ! imagesLoaded.has( index ) ) {
				loadThumbnailImage( index );
			} else {
				requestAnimationFrame( () => this.thumbSlider.emit( 'resize' ) );
			}
		};

		loadThumbnailsInView();

		// Add event listeners to load images when the slider initializes, reinitializes, or slides into view.
		this.thumbSlider.on( 'init', loadThumbnailsInView );
		this.thumbSlider.on( 'reInit', loadThumbnailsInView );
		this.thumbSlider.on( 'slidesInView', loadThumbnailsInView );
		this.thumbSlider.on( 'select', checkAndEmitResize );

		return () => {};
	}


	init( event ) {
		if ( ! this.options || ! this.viewport || this.classList.contains( 'initialized' ) ) {
			if ( Shopify.designMode && event?.detail?.blockId ) {
				let blockIndex = this.querySelector( `.strong-slide[data-id=${ event.detail.blockId }]` )?.getAttribute( 'data-index' );

				blockIndex && this.slider.scrollTo( Number( blockIndex ) );
			}

			return;
		}

		// Options.
		let options = JSON.parse( this.options.content.textContent ),
			plugins = [EmblaCarouselClassNames()];

		// Add watchResize to the options.
		options.watchResize = ( emblaApi, entries ) => {
			for ( const entry of entries ) {
				if ( emblaApi.containerNode() === entry.target ) {
					return true;
				}

				window.requestAnimationFrame(() => {
					emblaApi.reInit();
					emblaApi.emit( 'resize' );
				});

				break;
			}

			return false;
		};

		// Query controls.
		let prevBtn  = document.querySelector( options._prevBtn ),
			nextBtn  = document.querySelector( options._nextBtn ),
			dotsNode = document.querySelector( options._dotsNode );

		// Plugins.
		if ( options._autoplay ) {
			let autoplayOptions = {
				delay: Number( options._autoplay || 5000 ),
				stopOnMouseEnter: true,
				stopOnInteraction: false
			}

			plugins.push( EmblaCarouselAutoplay( autoplayOptions ) );
		}

		options._autoheight && plugins.push( EmblaCarouselAutoHeight() );
		options._fade && plugins.push( EmblaCarouselFade() );

		// Init slider.
		this.slider = EmblaCarousel( this.viewport, options, plugins );

		const selector = this;
		this.slider.on( 'init', () => selector.classList.add( 'initialized' ) );

		// Init lazy load.
		const removeLazyLoadHandler = this.addLazyLoad( this.slider );

		// Init slider thumbs.
		if ( this.thumbOptions && this.thumbsViewport ) {
			this.thumbSlider = EmblaCarousel( this.thumbsViewport, JSON.parse( this.thumbOptions.content.textContent ) );

			// After initializing the thumbSlider, call lazy load for the thumbnails.
			this.thumbSlider.on( 'init', () => this.addLazyLoadForThumbnails( this.thumbSlider ) );

			const removeThumbBtnsClickHandlers = this.addThumbBtnsClickHandlers( this.slider, this.thumbSlider );
			const removeToggleThumbBtnsActive  = this.addToggleThumbBtnsActive( this.slider, this.thumbSlider );

			this.slider.on( 'destroy', removeThumbBtnsClickHandlers ).on( 'destroy', removeToggleThumbBtnsActive );
			this.thumbSlider.on( 'destroy', removeThumbBtnsClickHandlers ).on( 'destroy', removeToggleThumbBtnsActive );

			this.thumbOptions.remove();
		} else {
			// Init only Thumb slider not available.
			const removeDotBtnsAndClickHandlers = dotsNode && this.addDots( this.slider, dotsNode );
		}

		// Init slider controls.
		const removePrevNextBtnsClickHandlers = prevBtn && nextBtn && this.addArrows( this.slider, prevBtn, nextBtn );

		// Remove template options.
		this.options.remove();
	}
}
customElements.define( 'strong-slider', StrongSlider );

CodeSandbox example

No response

[davidjerleke]

Hi @nambui1998,

Unfortunately, I can’t reliably debug issues from code fragments alone, especially for Safari-specific layout or loading bugs. To investigate this properly, I’ll need a minimal reproducible CodeSandbox (or similar) that demonstrates the issue in isolation.

Once there’s a sandbox, we can narrow the problem down. Thanks.

[davidjerleke]

Please refer to the lazy load example in the docs.