[whatwg] Deferring image load
otakustay at gmail.com
Sun Feb 12 22:39:03 PST 2012
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.
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
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
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.
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
4. onscrollintoview/onscrolloutofview events
5. DOMVisibilityChanged event
The wiki page (Chinese)  contains some more description of the ideas.
邮箱：otakustay at gmail.com
More information about the whatwg