On Thu, Sep 20, 2012 at 12:42 PM, Krinkle <krinklemail(a)gmail.com> wrote:
I suggest we built-upon or write or own module further
and integrate the
"lazy-load" principle. In other words, on document ready fix the images
above
the fold, which may or may not have started downloading yet.
Then cancel the rest and set those appropriately just before they come into
view. That saves bandwidth in general (by not loading images when they are
not
visible), and makes sure to download the right image based on the
environment at
that point in time.
Hmm... there are problems with this such as printing compatibility, but
this will also be combated in the future (and on mobile) with collapsible
sections and such. Worth considering...
When a standard for srcset (or whatever it will be
called) is ready and
actually
implemented in some browser we could also opt to keep it without
javascript.
Assuming plans won't get worse, the standard will include a natural
fallback by
storing the 1-0 ratio image in the src attribute. Which is what we'd want
on
older browsers/devices anyway.
I've updated the patch to use the 'srcset' attribute as defined in the
current HTML 5 working group version, only using the density options and
not the width/height options:
http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-conten…
Patch in gerrit:
https://gerrit.wikimedia.org/r/#/c/24115/ (core)
https://gerrit.wikimedia.org/r/#/c/24147/ (MobileFrontend)
If it detects that the browser supports the 'srcset' attribute natively on
img elements, the image replacement JavaScript code will be skipped -- in
theory this should make us future-proof, assuming that the standard doesn't
change and browsers implement it as written. :)
I've also extended the density detection to support IE 9/10 (only tested
10) using media queries to check the screen resolution in DPI and returning
a density approximation of one of [1, 1.5, 2] -- the densities we're
supporting so far.
This makes articles look a lot nicer on a Windows 8 tablet device (where
default Metro IE viewport settings give us a 1.5 ratio on a 1366x768 tablet
or 2.0 on a 1920x1080 tablet), as well as on desktop IE on a
high-resolution screen when the desktop zoom level has been bumped up to
150% or 200%.
1.5 also covers lots of Android and Windows Phone mobile devices, including
the Nexus 7 tablet and the upcoming Kindle Fire 7" HD and 8.9" HD tablets.
Other browsers report the ratio directly in window.devicePixelRatio:
Safari, Chrome, Android stock browser, Opera, and in theory current
nightlies of Firefox on Android (untested).
-- brion