Lazy loading image assets to avoid cumbersome load time

Hi,

A couple of people have complained about my pages taking too long to load. I make extensive use of high quality gifs and it seems they all load at once on page load.

This uses a lot of bandwidth and has slow ux.

Can you add lazy loading to the images based on what is visible?

Here is gpt-4s response:

```
Lazy loading is a strategy to identify resources as non-blocking (JavaScript and CSS) and load these only when needed. Lazy loading can significantly speed up loading on long web pages by loading images only as they're needed, rather than all at once.

Here are several libraries for lazy loading images:

1. lozad.js: Lozad.js is a lightweight option for lazy loading and multi-serving images, videos, iframes and more. It uses the Intersection Observer API, which is a modern and efficient way to react when an element enters or leaves the viewport.

2. lazyload: This is a lightweight (2.4 kB) pure JavaScript plugin for lazy-loading images, iframes, and more. It works by replacing the src (and optionally srcset) attributes on images, iframes, and videos with data attributes, and then revealing the resources when they enter the viewport.

3. lazysizes: Lazysizes is a high performance and SEO-friendly lazy loader for images, iframes, scripts, and more. One of its unique features is that it can automatically calculate the sizes attribute for responsive images based on actual layout width.

4. Yall.js (Yet Another Lazy loader): Yall.js is a fast, flexible, SEO-friendly JavaScript library for lazy loading images, videos, iframes, and more. It uses Intersection Observer, and it's responsive and works with srcset.

5. vanilla-lazyload: This is another lightweight, easy to use JavaScript plugin for lazy loading images, iframes, videos, and more. It works by using the Intersection Observer API to check if an element is in the viewport and only then loading it.

6. Echo.js: Echo.js is a simple, lightweight (1.5kB) JavaScript library that allows you to lazy-load images and background data on your webpages. It uses HTML5 data-* attributes and window.onscroll event to load images as they come into the viewport.

Remember to test lazy loading libraries with your specific use case to ensure compatibility and effectiveness. Also, as of late 2021, native lazy loading has been introduced to modern browsers like Chrome, Firefox, and Edge with the loading="lazy" attribute for <img> and <iframe> tags, so you may not need a library at all for simpler use cases.
```

Cheers

Rather than ask the site Admins to re-code their site in order to accommodate your "extensive use" of large files, could you maybe not be so "extensive"? Seems rather self-indulgent.

Gif is a horrible format for video - it's very data hungry. Implementing lazy loading as a remedy is like a bandaid over a bullet hole.

I do not approve this approach.
You are by far the only one who is trying to change this thing.
While others are using regular, very small gifs.

So, my answer is:
Instead adding some bandaid like @jiwenji said, it could be helpful to add frame+size limit on thumbnail gif, to prevent the problem itself... If you want to use it as thumbnail, its fine, but make sure its fast and small (so even the oldest android wont get stuck on loading/viewing it). We do not need 15MB 300frame HQ gif on every posted model and every one of them being lazy-loaded.
That's just, so... bad.. idea.

Use a smaller filetype instead of gif. Like webp, or apng, or avif if they're supported. I know at least webp animations are supported and can have better quality than gif at half the size. That would make your animations load twice as fast.

Also, civitai already implements lazy loading. That's why when you scroll down it has to load more posts. And why when you click next image it hasn't always loaded it yet. Their lazy loading could potentially be optimized further but I wouldn't say it's worth the time investment for the tiny performance improvement it would bring.

When I visit your pages I don't experience any extra "page load" time. The pages load normally for me then I'm just waiting for the gif animations to fully load, but they are at least showing the first few frames right away.