Jdlrobson has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/351736 )
Change subject: Use transparent gif as lazy-image-placeholder
......................................................................
Use transparent gif as lazy-image-placeholder
The advantage of using an image is it will scale appropriately
with max-width
Data uris will not cause a download and gzip will avoid increasing
bytes shipped to users.
Bug: T146298
Change-Id: Ia7ded694af550b5c13cf1eb5fba392c1e92ca8c1
---
M includes/MobileFormatter.php
M tests/phpunit/MobileFormatterTest.php
2 files changed, 29 insertions(+), 5 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/36/351736/1
diff --git a/includes/MobileFormatter.php b/includes/MobileFormatter.php
index 5234c06..95755c1 100644
--- a/includes/MobileFormatter.php
+++ b/includes/MobileFormatter.php
@@ -10,6 +10,12 @@
*/
class MobileFormatter extends HtmlFormatter {
/**
+ * Data uri for a transparent gif
+ * @var string
+ */
+ const TRANSPARENT_GIF_DATA_URI =
+
"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+ /**
* Class name for collapsible section wrappers
*/
const STYLE_COLLAPSIBLE_SECTION_CLASS = 'collapsible-block';
@@ -470,8 +476,10 @@
$parent = $img->parentNode;
$dimensions = $this->getImageDimensions( $img );
- $dimensionsStyle = ( isset( $dimensions['width'] ) ?
"width: {$dimensions['width']};" : '' ) .
- ( isset( $dimensions['height'] ) ? "height:
{$dimensions['height']};" : '' );
+ // Don't get stuck in an infinite loop.
getElementsByTagName returns a live node list!
+ if ( $img->getAttribute( 'class' ) ===
'lazy-image-placeholder' ) {
+ continue;
+ }
if ( $lazyLoadSkipSmallImages
&& $this->skipLazyLoadingForSmallDimensions(
$dimensions ) ) {
@@ -482,7 +490,20 @@
$noscript = $doc->createElement( 'noscript' );
// To be loaded image placeholder
- $imgPlaceholder = $doc->createElement( 'span' );
+ // We use an image to ensure that the image respects
its aspect ratio when
+ // max-width and height are applied (see T146298)
+ $imgPlaceholder = $doc->createElement( 'img' );
+ $imgPlaceholder->setAttribute( 'src',
self::TRANSPARENT_GIF_DATA_URI );
+ $dimensionsStyle = '';
+ if ( isset( $dimensions['width'] ) ) {
+ $imgPlaceholder->setAttribute( 'width',
$dimensions['width'] );
+ $dimensionsStyle = "width:
{$dimensions['width']};";
+ }
+ if ( isset( $dimensions['height'] ) ) {
+ $imgPlaceholder->setAttribute( 'height',
$dimensions['height'] );
+ $dimensionsStyle .= "height:
{$dimensions['height']};";
+ }
+
$imgPlaceholder->setAttribute( 'class',
'lazy-image-placeholder' );
$imgPlaceholder->setAttribute( 'style',
$dimensionsStyle );
foreach ( [ 'src', 'alt', 'width', 'height', 'srcset',
'class' ] as $attr ) {
diff --git a/tests/phpunit/MobileFormatterTest.php
b/tests/phpunit/MobileFormatterTest.php
index a3b7800..ba81dfc 100644
--- a/tests/phpunit/MobileFormatterTest.php
+++ b/tests/phpunit/MobileFormatterTest.php
@@ -111,7 +111,8 @@
$lazyLoadedImageStyles = '<img src="bigPicture.jpg"
style="vertical-align: -3.505ex; '
. 'width: 84.412ex; height:70.343ex;
background:none;">';
- $placeholderStyles = '<span class="lazy-image-placeholder" '
+ $placeholderStyles = '<img class="lazy-image-placeholder" '
+ . 'src="' . MobileFormatter::TRANSPARENT_GIF_DATA_URI .
'" '
. 'style="width: 84.412ex;height: 70.343ex;" '
. 'data-src="bigPicture.jpg">'
. ' '
@@ -119,7 +120,9 @@
$noscriptStyles = '<noscript>' . $lazyLoadedImageStyles .
'</noscript>';
$originalImage = '<img alt="foo" src="foo.jpg" width="100" '
. 'height="100" srcset="foo-1.5x.jpg 1.5x, foo-2x.jpg
2x">';
- $placeholder = '<span class="lazy-image-placeholder" '
+ $placeholder = '<img class="lazy-image-placeholder" '
+ . 'src="' . MobileFormatter::TRANSPARENT_GIF_DATA_URI .
'" '
+ . 'width="100" height="100"'
. 'style="width: 100px;height: 100px;" '
. 'data-src="foo.jpg" data-alt="foo" data-width="100"
data-height="100" '
. 'data-srcset="foo-1.5x.jpg 1.5x, foo-2x.jpg 2x">'
--
To view, visit https://gerrit.wikimedia.org/r/351736
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ia7ded694af550b5c13cf1eb5fba392c1e92ca8c1
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <jrob...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
