Integrate lazy image loading transform
Closed, ResolvedPublic

Description

Once we're using headless doc fragments which are pre-transformed before being attached to the DOM, it should be easier to integrate lazy loading using its normal methods without us having to swap out the images for span placeholders in native code, as we did in our attempt in this spike T174711.

Mhurd created this task.Sep 8 2017, 12:28 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 8 2017, 12:28 AM
Mhurd updated the task description. (Show Details)Sep 8 2017, 12:31 AM
JMinor triaged this task as Normal priority.Sep 11 2017, 6:24 PM
Mhurd added a subscriber: JMinor.

@JMinor I noticed you moved this to doing, but guessing you meant 'blocked' so we can give the headless transform bits some time to shake out?

Mhurd claimed this task.

Per discussion at planning doing quick spike to re-evaluate integrating this with our new headless section loading code.

Spike results:

Wiring up trial integration was fairly easy.

Issues:

  • image taps will need to be modified (gallery not loaded)
  • weird light flicker when images appear (noticed on dark mode)
  • even though images are hidden and appear at correct time, loading a previously unloaded article without scrolling at all, then disconnecting the internet, then scrolling, the images all appear as they are scrolled to, which indicates they were pre-fetched and not lazily loaded... trying to debug this presently, but seeing similar behavior on the lazy loading demo on safari (whereas it seems to work as expected on chrome/firefox)
Mhurd added a comment.Dec 1 2017, 12:18 AM

@Niedzielski's gonna take a peek at the safari issue i mentioned above. Throwing this back in blocked/waiting in mean time.

Mhurd added a comment.Dec 12 2017, 7:46 PM

Testing criteria

Because we're re-wired how article images are managed, the following test cases would be good to re-run:

  • 43
  • 49
  • 50
  • 65 to 67
  • 75 to 77
  • 84 to 86

Test fast scrolling too:

  • load an article with lots of images like enwiki > Pablo Picasso
  • once it appears, scroll very quickly down the article, about half way to the bottom should be fine
  • because you've scrolled very quickly, a lot of the images may have been just gray placeholder boxes as you scrolled past them
  • so now scroll more slowly back up to the top of the article and ensure that the images are now showing (instead of the gray placeholder boxes)

@Mhurd @JoeWalsh @JMinor I'm confused, do I run this on Safari app on an iOS device, or do I use the Wikipedia app?

ABorbaWMF added a subscriber: ABorbaWMF.

Lots of testing on this across 5.7.3 builds. Looks good on 5.7.3 (1296). Moving to signoff

JMinor closed this task as Resolved.