Native image lazy-loading for the web

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.

The OS could then automatically apply this to website load behavior, and apps could request permission to receive this information too. E.g. Spotify could pre buffer more of the playlist you’re listening to, and news reader apps could load a few articles in advance.

I think you are spot-on here. The current JavaScript hacks cause problems, handing the control to the browser is a much better solution.

but I'm also worried about the "unloading" of these resources. with a proper implementation you don't only load first images into view and preload the others, but also unload those out of view to ease the compositing load on older gpu - and older iphones that have most their ram eaten by the updated ios are really problematic, especially because when the gpu crashes with an out of memory error safari shows a "the website crashed" message that puts the blame on the page instead on its own shitty memory management.

You don't need a native feature for that. Just emulate a big screen and dispatch a scroll event, that's what SingleFile [1] does.

[1] https://github.com/gildas-lormeau/SingleFile

I guess not on Medium, but it's very common for sites to unload any image that isn't in the viewport, so...the joke's on us.

Medium, and similar websites, should push their images via HTTP2.

But as everything in life, it depends, read my use case for lazy loading…

I maintain a few marketing websites for a game studio, and as you can guess these websites contain several high-resolution images that —according to the marketing team— need to be loaded all together from the front page. This is obviously a stupid requirement, but I don’t get paid to complain, instead I decided to add lazy loading to these websites. Many users just visit the home page to access the navigation bar, and jump to internal pages specific to the games they are interested in, they don’t care about the rest of the content, so why should I —as the maintainer of these websites— force the immediately download of all these heavy images?

I, too, pay for a limited mobile plan (CAD $95 for only 3GB per month, yeah, I know, it’s very expensive) so of course I want to avoid the download of unnecessary resources from every website I visit. Unfortunately, I do not maintain every major website in the Internet, so I cannot optimize things for the masses. I can only give a good example using the websites I maintain. I am looking forward to have `loading="auto"` enabled by default in every modern web browser, that or 5G with less expensive data plans, but that’s a different story.

I like the basic loading idea, I think it is a little problematic since the Browser Vendor gets to decide how it is loaded. I kind of understand why we need this with, but most of the implementation sucks. They keep thinking about optimising for Network, bandwidth or resources and not the User Experience.

In the Medium Example, I don't want to see image loading, it is annoying. Images should always be preloaded before I scroll down. Something like ~2 / 3 Fold below the current view should have been fully loaded. So Scrolling ( In general pace ) down all content should be there already.

Ideally, you could add an article to the Reading List on your computer, and then view it later on your phone that downloaded it in the background when it still had network access.

In practice, my quick testing results just now were mixed: Safari kept saying that a Medium article wasn’t available offline, a Quartz article only loaded the header (with what looked like a fully-opaque white overlay covering the content itself), but a Daring Fireball post (i.e., without any JavaScript trickery) loaded just fine.

A how-to for this feature: https://www.macworld.com/article/3252168/how-to-set-offline-...

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

https://hacks.mozilla.org/2019/03/scroll-anchoring-in-firefo...