Create an image loading animation?

[DomeWorld1]

The Problem

The image loading in the article is very stiff, I hope create an image loading animation.

The Solution

Like Minerva, the image fades in. I think it's a good design.

You can also use image scrolling to lazily load.

[alistair3149]

We used to have JS lazyloading years ago in the Citizen skin. However, it caused a lot of issues with many wikis so we ended up deferring to use the browser native method instead ($wgNativeImageLazyLoading). However, with the native method, there are no reliable way to tell whether an image is loaded, so there isn't a good way to implement any animation for that.

If anyone knows of a way, please feel free to drop a comment or submit a PR!

[DomeWorld1]

https://starcitizen.tools/
The current devtools console prompt warning is:
[Intervention] Images loaded lazily and replaced with placeholders. Load events are deferred. See https://go.microsoft.com/fwlink/?linkid=2048113

It will delay the triggering of the load event
The solution to the problem that someone else encountered：Candinya/Kratos-Rebirth#144.

[DomeWorld1]

I provide codes that can achieve fade in loading, which have significant limitations😣:

#content img {
	opacity: 0;
	transition: opacity 0.2s ease-in;
}

#content a.image {
    background-color: var( --color-surface-2 );
}

const lazyImages = document.querySelectorAll('img');
lazyImages.forEach(function(image, index) {
	image.classList.add('lazy');
	image.dataset.src = image.src;
	image.removeAttribute('src');
});
var lazyImageObserver = new IntersectionObserver(function(entries, observer) {
	entries.forEach(function(entry) {
		if (entry.isIntersecting) {
			var lazyImage = entry.target;
			lazyImage.src = lazyImage.dataset.src;
			lazyImage.classList.remove('lazy');
			lazyImageObserver.unobserve(lazyImage);
			lazyImage.style.opacity = '1';
		}
	});
});
lazyImages.forEach(function(lazyImage, index) {
	lazyImageObserver.observe(lazyImage);
});

[DomeWorld1]

I found that the MobileFrontend comes with it, can use it directly on the desktop? Because many people don't use MobileFrontend. You can take a look if you have time🐣
https://github.com/search?q=repo%3Awikimedia%2Fmediawiki-extensions-MobileFrontend+lazy&type=code

[alistair3149]

I'm aware of the MF implementation and as I mentioned above, we had a similar implementation a long time ago. However, it was removed as the native browser implementation is more superior and has noscript support.

It is unlikely that we will go back to the JS lazyload implementation, given that core already supports the native method.

[alistair3149]

https://starcitizen.tools/ The current devtools console prompt warning is: [Intervention] Images loaded lazily and replaced with placeholders. Load events are deferred. See https://go.microsoft.com/fwlink/?linkid=2048113

I think it seems to have affected the loading of images to some extent now. The solution to the problem that someone else encountered：Candinya/Kratos-Rebirth#144.

I'm not sure whether it is a bug, it seems to be exclusive to Microsoft Edge and only popping up recently. There's a relevant task that is being tracked: https://phabricator.wikimedia.org/T341480

Either way it is a MediaWiki core implementation and is unrelated to the Citizen skin, it is more suitable to submit the relevant info to that task.