Preview Images appear to load indefinitely

[itswzyss]

NOTE: Before you start, the following should be completed.

• Read Wiki to understand the usage and the correct effect of functional design.
• Make sure no similar issue(including closed ones) exists.
• Try to find the answer on Jekyll Forum and StackOverflow.

Description

Any image specified as a preview image appears to load forever unless the page is reloaded multiple times. Using regular images in the body of posts / pages have no issue. I tried both local and remote hosting for preview images - no change.

Operations you have already tried

• Clear browser cache thinking it was a local issue
• Try local image path rather than remote -- same issue
• Double-check wiki and getting started post to make sure I didn't miss something

Logs/Screenshots

chrome_buj6Snygnk.mp4

chrome_KMr24pEXqK.mp4

[itswzyss]

Just after making this post, I realized that this seems to only affect Google Chrome v114.0.5735.134. Edge and Firefox don't seem to show this issue at all.

[clearbluejar]

seeing the same on my site... Chrome 114.0.5735.133

[clearbluejar]

seemed to resolve after closing the browser. could have been some issue with the cache as I was debugging a liveserver preview of the site.

[itswzyss]

@clearbluejar I thought the same, however I was able to replicate this across multiple devices unrelated to the development process 🤔

[timothystewart6]

It also happens on Mobile Safari on the image image preview and the post image

[timothystewart6]

It also happens on Mobile Safari on the image image preview and the post image

Just reporting back. It's gone now. Must have been caching from cloudflare. Seems to have cleared itself up for me with mobile Safari

[itswzyss]

@timothystewart6 Thanks for checking back in -- I also use Cloudflare and forgot how aggressive their caching can be. I'll tinker with that and report my findings.

[itswzyss]

@timothystewart6 Thanks for checking back in -- I also use Cloudflare and forgot how aggressive their caching can be. I'll tinker with that and report my findings.

Cleared browser cache and also purged cache on my domain -- still seeing the same issue. Even when trying to break it, I can't replicate this on Firefox. Chrome on Desktop and Mobile tho, consistently breaks.

[cotes2020]

When the browser loads the image from the cache, the lazyloaded event is not fired, so the current JS logic cannot properly remove the shimmer effect.

jekyll-theme-chirpy/_javascript/modules/components/img-lazyload.js

Lines 10 to 15 in 4fe145e

	/* Stop shimmer when image loaded */
	document.addEventListener('lazyloaded', function (e) {
	const $img = $(e.target);
	$img.parent().removeClass('shimmer');
	});
	}

[timothystewart6]

When the browser loads the image from the cache, the lazyloaded event is not fired, so the current JS logic cannot properly remove the shimmer effect.

jekyll-theme-chirpy/_javascript/modules/components/img-lazyload.js

Lines 10 to 15 in 4fe145e

	/* Stop shimmer when image loaded */
	document.addEventListener('lazyloaded', function (e) {
	const $img = $(e.target);
	$img.parent().removeClass('shimmer');
	});
	}

Great find! Thank you!

[itswzyss]

When the browser loads the image from the cache, the lazyloaded event is not fired, so the current JS logic cannot properly remove the shimmer effect.

jekyll-theme-chirpy/_javascript/modules/components/img-lazyload.js

Lines 10 to 15 in 4fe145e

	/* Stop shimmer when image loaded */
	document.addEventListener('lazyloaded', function (e) {
	const $img = $(e.target);
	$img.parent().removeClass('shimmer');
	});
	}

I see -- I was wondering if this had something to do with caching. Is there an easy way to mitigate this issue or is this just something we'll have to deal with? Digging into js is definitely a bit outside of what I can mess with.

[Rootjhon]

after update df8ff54

issues still happen in post page. (cover image)

---
title: xxxx
date: xxx
categories: [x,y]
image:
  path:  the pic's url 
---

@cotes2020

[jinhg0214]

It's a temporary measure, but I solved it like this.

In the shimmer class of the _sass/addon/common.scss/commons.scss file

&::before{
    content: '';
    // position: absolute;
    // background: var(--shimmer-bg);
    // height: 100%;
    // width: 100%;
    // -webkit-animation: shimmer 1.3s infinite;
    // animation: shimmer 1.3s infinite;
}

It was resolved by annotating the inside part.