Repository: flutter
Issue: Lazy Loading Image on Flutter Web
Labels: c: new feature,platform-web,c: proposal,P3,team-web,triaged-web

<!-- Thank you for using Flutter!

     If you are looking for support, please check out our documentation
     or consider asking a question on Stack Overflow:
      * https://flutter.dev/
      * https://api.flutter.dev/
      * https://stackoverflow.com/questions/tagged/flutter?sort=frequent

     If you have found a bug or if our documentation doesn't have an answer
     to what you're looking for, then fill out the template below. Please read
     our guide to filing a bug first: https://flutter.dev/docs/resources/bug-reports
-->

Hi this is a feature request.

## Use case
On the web, loading a long list of the image has a critical impact on performance.

As a current state of Flutter Web, the browser load every offscreen image, increasing the loading time.

#### Left: Without lazy load, Right: With lazy load
![image](https://user-images.githubusercontent.com/35027979/113481181-45c47000-94c2-11eb-82ad-826bdde3f267.png)

Take [Flutter Gallery as an example](https://gallery.flutter.dev/#/reply), open developers tool and toggle view as iPhone 5.
An offscreen image like `avatar_4.jpg` would be immediately loading together with the onscreen image, increasing the time of loading the web.

First load, avatar_4.jpg is not a viewport and shouldn't load yet.
<img width="1440" alt="Screen Shot 2564-04-03 at 21 22 57" src="https://user-images.githubusercontent.com/35027979/113481273-c4211200-94c2-11eb-8289-a59d30823b6f.png">

After scrolling and image is in viewport, the image should load.
<img width="1440" alt="Screen Shot 2564-04-03 at 21 23 59" src="https://user-images.githubusercontent.com/35027979/113481293-ea46b200-94c2-11eb-88e1-adea0c583488.png">

Normally, a web developer can provide loading = "lazy" on an image to mark the image as lazy load.
```html
<img loading="lazy" />
```

But Flutter is rendering web in the canvas so the Flutter team might have to discuss some work about this.

Without this, a metric like Lighthouse would be recommended to [Defer offscreen images (web.dev](https://web.dev/offscreen-images).
![Lighthouse](https://user-images.githubusercontent.com/35027979/113483010-7230ba00-94cb-11eb-8bfb-b492966d9d7a.png)

Since Lighthouse also has a role in ranking the web on Google, web developer also usually check their web on Lighthouse as a process.

Lazy load image has a large impact on the web development side as the image is **one of the heaviest assets** on the web.
With Lazy Load Image, Flutter would have a much better performance metric.

### Current Workaround in Flutter.
As a current workaround of Flutter, a developer could create a lazy ListView to lazy render widget, but this also lazy render every widget, not just an image. 

On the web development side, most of the time, developers don't need to lazy render element but rather let the browser process it with HTML which has better performance than appending it using JavaScript thus having better SEO performance to let crawler read the content of the web.

This request only applies to Lazy Loading an image anywhere not inside some widget/list but rather load if it presents onscreen (reason in Proposal below).
<!--
     Please tell us the problem you are running into that led to you wanting
     a new feature.

     Is your feature request related to a problem? Please give a clear and
     concise description of what the problem is.

     Describe the alternative solutions you've considered. Is there a package
     on pub.dev/flutter that already solves this?
-->

## Proposal
According to [HTML Standard (whatwg.org) or known as w3](https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-loading), image tag accept `loading` attribute with a possible value of either `eager` or `lazy`.

- Where `eager` is to suddenly load the image on any condition.
```html
<img loading="eager" />
```

- And `lazy` is to load an image when the element is onscreen.
```html
<img loading="lazy" />
```

It would be a good idea to match with web development API for future usage if Flutter Web will support export as HTML and JavaScript.

Adding an optional named argument `loading` on an `Image` widget like an HTML tag, accepting an enum of `ImageLoading` (or any other name) with a default value of `ImageLoading.eager` to provide an image loading method matching property with w3 standard (currently provide `eager` and `loading`) but could also extend for Flutter's implementation way of image loading in the future.

```dart
build(context) 
  final imageLink = "https://walfiegif.files.wordpress.com/2020/12/out-transparent-23.gif?w=371&h=458"

  return Image.network(
    imageLink,
    loading: ImageLoading.lazy,
  );
}
```

<img src="https://user-images.githubusercontent.com/35027979/113482278-22042880-94c8-11eb-878a-4582b4e9114c.png" width="600" />
<img src="https://user-images.githubusercontent.com/35027979/113482280-229cbf00-94c8-11eb-95f5-bb4145e36e3c.png" width="600" />

If possible, it would be awesome to be able to use this API in native Flutter as it will reduce a lot of boilerplate in like 99% of production app with an image as lazy loading is used almost everywhere.

Opinion: This should be provided by Flutter directly as it's one of the important standards for the web optimization process.

Thanks for considering this proposal.

<!--
     Briefly but precisely describe what you would like Flutter to be able to do.

     Consider attaching images showing what you are imagining.

     Does this have to be provided by Flutter directly, or can it be provided
     by a package on pub.dev/flutter? If so, maybe consider implementing and
     publishing such a package rather than filing a bug.
-->