
Native image lazy-loading for the web - skellertor
https://addyosmani.com/blog/lazy-loading/
======
radarsat1
Ah right, lazy loading, this is the reason that I have to make sure to scroll
down the entire length of a medium.com article I'm reading on my phone and
back to the top again to make sure the diagrams and math-as-images load
completely before I get on a subway line that doesn't have 3g service. Hate it
when I forget. Otherwise I'm left staring at blurry lines that don't explain
much about what trying to read until it's time to get off. Sucks when my
commute is 40 minutes straight on the same line.

I guess an advantage of a 'native' feature could be that browsers could offer
a button saying 'please pre-load this page!'

~~~
reaperducer
The problem with the tech bubble these days is that people within it assume
that everyone has the same internet connectivity they do. And that they have
it all the time.

Sadly, Apple has been like this since since at least the late 1980's. Out in
the desert trying to help 150 children sign up for health care coverage and
need to look something up via satellite connection? Oh, wait... the macOS is
downloading Garage Band crap in the background that I didn't ask for and don't
need. (I don't remember if Garage Band was the offender, but it was one of the
pointless programs wasting space on my business computer).

Just like app developers who only test their apps on the high-end phones they
have, not the phones that the majority of people have.

For the web sites I make for work, I test them on all kinds of devices. But I
make sure that they all work on the cheapest pre-paid smartphone I could find
at 7-Eleven.

The internet was built to bring universal information to all, not just Flash
games to the rich.

~~~
danaris
Apple's hardly the only offender here, and if you don't want the iLife
programs on a Mac, removing them is trivial. Drag to trash, empty, boom, gone.
Apple doesn't do anything to impede removal, nor does it aggressively try to
push them on you like so much of the bloatware preloaded on Windows machines.

(And if you had GarageBand in the late 1980s, then I definitely want to know
who sold you your time machines...)

~~~
reaperducer
_Drag to trash, empty, boom, gone._

And then they’re back after the next OS upgrade.

~~~
danaris
Are you sure this is still true?

I know it was for a while, but since the iLife apps were added to the Mac App
Store, I thought they no longer reinstalled automatically, and if you wanted
them back you just downloaded them from the Store. However, I haven't deleted
them myself, so I don't know offhand.

------
oftenwrong
Why would I want the loading behaviour of images to be chosen by the site I am
browsing?

I would prefer to choose for myself whether images load eagerly or lazily on
all sites I visit. This way, I would always know which type of loading to
expect as I browse, and I would always get the type of loading I prefer.

~~~
karmakaze
This is toward the same goal. By standardizing it, browsers would be able to
give you a lazy loading preference rather than sites implement their own in
script that a browser/user can't override.

~~~
ksec
Well then the problem is users with different browser will get vastly
different experience depending on the Browser Vendor, not the site owner.

------
lol768
This attribute appears to have been proposed and implemented by Google. Has
any other vendor expressed an intent to implement/actually implemented this
yet?

It seems a little premature to describe this as native support "for the web"
if the functionality is limited to one vendor and you're forced to use a
polyfill everywhere else.

~~~
franga2000
The driving force behind this feature do seem to be a couple of Googlers, but
at least one person from Mozilla and one from Apple have been involved in the
discussion and contributed to the spec changes. The changes have not been
accepted into the spec, however, or even reviewed by W3C-TAG, so it isn't a
standard yet.

You can find the full discussion here:
[https://github.com/whatwg/html/pull/3752](https://github.com/whatwg/html/pull/3752)

~~~
bzbarsky
The Mozilla person involved in that discussion is the editor of the relevant
spec, and is only involved in terms of making sure the changes are correctly
indicated in the spec. I don't believe he has expressed any opinion on the
changes themselves.

I just filed [https://github.com/mozilla/standards-
positions/issues/151](https://github.com/mozilla/standards-
positions/issues/151) on getting an actual Mozilla position on this.

------
gardaani
I hope that they ship this with image intrinsicsize / aspect-ratio or whatever
it is called now. Otherwise this lazy-loading will make page jumping and
layout instability worse, because images are loaded only after the user has
scrolled to their position.

[https://googlechrome.github.io/samples/intrinsic-
size/](https://googlechrome.github.io/samples/intrinsic-size/)

~~~
JetSpiegel
Firefox at least has implemented Scroll Anchoring.

[https://hacks.mozilla.org/2019/03/scroll-anchoring-in-
firefo...](https://hacks.mozilla.org/2019/03/scroll-anchoring-in-firefox-66/)

------
revskill
That's why i love React Suspense very much. It offers the flexibility in the
hand of developers instead of some inflexible native API.

<Suspense fallback={<Placeholder />}> <Image src="" /> </Suspense>

When SSR, this one will show a real <img> tag. When SPA, this one will lazy
load image.

A Win-Win for both devs and customers.

------
georgecalm
I’m excited about this. There’s usually a ton unnecessary CPU usage with the
current techniques, not to mention the human time waste of re-implementing
them in JS. There’s feature detection for this too, so we can gracefully
degrade “loading” to existing solutions and take advantage of it right away.

------
leshow
Is this something just chrome is implementing or is this actually part of the
HTML standard now?

~~~
stonogo
The HTML standard _is_ "things chrome is implementing"

~~~
leshow
That's what scares me

------
really3452
I hope they add an optional setting.

IE: <img src="celebration.jpg" loading="optional" alt="..." />

Then there is a place-holder graphic in place that you could click on to load
the image.

------
skilled
Hmm, I guess this is good news for WordPress users who won't have to rely on a
plugin to do this?

Excited to see what else they are going to bring to the browser to speed up
sites.

~~~
megaman821
I think the virtual scroller will be performance boon for many sites.
[https://chromestatus.com/feature/5673195159945216](https://chromestatus.com/feature/5673195159945216)

------
s_y_n_t_a_x
Does this support aborting the network call if you scroll the element
offscreen before it loads? That's essential to infinite scrolling.

------
eschaton
Why would you have ever written JavaScript to lazy-load images?

The browser knows what’s on the page and can optimize its loading already.
Don’t screw with that. This kind of assistance from the browser is why.

Also, you don’t need to run code in documents. Web pages are documents.

