Page MenuHomePhabricator

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


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.

Event Timeline

Krinkle updated the task description. (Show Details)
	<img alt="Benedict Cumberbatch SDCC 2014.jpg" src="" 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="" 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>

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.

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

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

Jdlrobson claimed this task.