Proposals/img lazyload/en

Subject: Deferring image load

We would like to present an authoring difficulty with regard to showing images on the Web with limited bandwidth, when deferring loading of certain or all images are preferable. We have some vague ideas about what browser/markup solutions instead of script solutions might look like, but we are more interested in having the problems solved.

Scenario

1. On a product description page of a shopping site, there are several *main* pictures of the product, along with about twenty or so camera pictures of the product taken from different angles. When the HTML is parsed, browsers by default simultaneously start downloading all images, potentially making some of the *main* ones invisible.
2. On an album page where hundreds of pictures are expected to be shown, it is often required that pictures currently in a user's screen should appear as fast as possible. Loading of a picture outside the screen can be deferred to the time that the picture enters or is about to enter the screen, for the purpose of optimization user experience.
3. For a site with limited bandwidth on the server side, it is preferable to minimize the amount of data transferred per each page view. 70% of the users only read the first screen and hence pictures outside the first screen don't need to be downloaded before the user starts to scroll the page. This is to reduce server-side cost.

Current Solution and It's Drawbacks

The current solution pretty much consists of three steps:

1. The server outputs <img>s with @src pointing to a transparent image, transparent.gif, and with @data-src pointing to the real location of the image.
2. Listen to the window.onscroll event.
3. The event handler finds all <img>s in the visible area and set their @src to @data-src that were stored.

Some of the drawbacks of this approach:

1. "find all <img>s in the viewable area" isn't easy.
2. If the above query requires boundingClientRect calls, it causes unnecessary layout and hence harms the performance.
3. Browsers can't use better strategies such as:
   1. Download more pictures when reflow/repaint don't frequently happen.
   2. The network/bandwidth is good and browsers can download more.
   3. According to user setting, download pictures that are enough close to the visible area, say one or two screen height.

Idea Bainstorming

1. the @defer attribute on <img> and <iframe>
2. the similar @deferpolicy attribute with value a combination of visible, network-idle and render-idle
3. a global switch as a http header or an attribute on html to switch UAs image loading from "obtain images immediately" to "obtain on demand" or vice versa.
4. onscrollintoview/onscrolloutofview events
5. DOMVisibilityChanged event

The wiki page (Chinese) [1] contains some more description of the ideas.

[1] http://www.w3.org/html/ig/zh/wiki/Proposals/img_lazyload