Page MenuHomePhabricator

Reduce lazy-load images HTML and DOM footprint
Closed, ResolvedPublic

Description

The DOM should contain nothing other than:

  • noscript with original.
  • empty placeholder span that reserves the correct dimensions and has and data attributes about the image.

The spinner can be applied with a css class to the lazy-image-placeholder class by default (until loaded). Or, if current logic limits it to being its own element, it can be appended to the placeholder at run time (raced against actual lazy loading to avoid conflicts - perhaps using requestAnimationFrame when available).

When lazy loading the image, the placeholder can be atomically swapped to avoid extra repaint cycles. E.g. $placeholder.replaceWith($image). It also allows the placeholder to be natively garbage collected.

Details

Related Gerrit Patches:
mediawiki/extensions/MobileFrontend : masterDon't serve spinner in raw HTML

Related Objects

Event Timeline

Krinkle created this task.Mar 8 2016, 12:47 AM
Krinkle updated the task description. (Show Details)
<noscript>
	<img alt="Benedict Cumberbatch SDCC 2014.jpg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Benedict_Cumberbatch_SDCC_2014.jpg/300px-Benedict_Cumberbatch_SDCC_2014.jpg" width="300" height="402" data-file-width="1769" data-file-height="2371"></noscript>
<span class="lazy-image-placeholder" style="width: 300px;height: 402px;"
	data-src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Benedict_Cumberbatch_SDCC_2014.jpg/300px-Benedict_Cumberbatch_SDCC_2014.jpg" data-alt="Benedict Cumberbatch SDCC 2014.jpg" data-width="300" data-height="402">
	<span class="mw-ui-icon mw-ui-icon-element mw-ui-icon-spinner loading spinner"></span>
</span>

The current implementation of mw-ui-icon doesn't allow us to merge that with .lazy-image-placeholder so I'm not sure how much cleaner we can get this markup.

The image is placed inside the placeholder rather than replacing it.

Jdlrobson triaged this task as Low priority.Mar 14 2016, 5:09 PM

Change 277568 had a related patch set uploaded (by Jdlrobson):
Don't serve spinner in raw HTML

https://gerrit.wikimedia.org/r/277568

Change 277568 merged by jenkins-bot:
Don't serve spinner in raw HTML

https://gerrit.wikimedia.org/r/277568

Jdlrobson closed this task as Resolved.Mar 16 2016, 12:17 AM
Jdlrobson claimed this task.
wychen added a subscriber: wychen.Mar 2 2017, 8:25 PM