[whatwg] Deferring image load

[Gray Zhang]

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

Thanks
Gray Zhang

-- 
张立理 GrayZhang
博客：http://www.otakustay.com
微博：http://www.weibo.com/otakustay
邮箱：otakustay at gmail.com