Set lazy loading for images.

omeka · Apr 8, 2024 · 2203f9a · 2203f9a
1 parent 2c1e292
commit 2203f9a
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 6 deletions.
diff --git a/application/src/Stdlib/Oembed.php b/application/src/Stdlib/Oembed.php
@@ -88,7 +88,7 @@ public function renderOembed(PhpRenderer $view, array $oembed)
         if ('photo' === $type) {
             $url = $oembed['url'] ?? null;
             return sprintf(
-                '<img src="%s" width="%s" height="%s" alt="%s">',
+                '<img loading="lazy" src="%s" width="%s" height="%s" alt="%s">',
                 $view->escapeHtml($url),
                 $view->escapeHtml($oembed['width'] ?? ''),
                 $view->escapeHtml($oembed['height'] ?? ''),

diff --git a/application/src/View/Helper/Thumbnail.php b/application/src/View/Helper/Thumbnail.php
@@ -31,6 +31,13 @@ public function __invoke(AbstractRepresentation $representation, $type, array $a
         $params = $triggerHelper('view_helper.thumbnail.attribs', $params, true);
         $attribs = $params['attribs'];
 
+        // Include element for lazy loading. See https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading
+        if (!isset($attribs['loading'])) {
+            // Due to a bug in firefox, the attribute "loading" should be set
+            // before src (see https://bugzilla.mozilla.org/show_bug.cgi?id=1647077).
+            $attribs = ['loading' => 'lazy'] + $attribs;
+        }
+
         if (!isset($attribs['alt'])) {
             $attribs['alt'] = $representation->thumbnailAltText();
         }

diff --git a/application/view/common/asset-form.phtml b/application/view/common/asset-form.phtml
@@ -19,7 +19,7 @@ if ($assetId) {
     <?php if ($asset): ?>
     <span class="selected-asset">
         <?php
-        echo sprintf('<img class="selected-asset-image" src="%s" alt="%s"><div class="selected-asset-name">%s</div>',
+        echo sprintf('<img loading="lazy" class="selected-asset-image" src="%s" alt="%s"><div class="selected-asset-name">%s</div>',
             $this->escapeHtml($asset->assetUrl()),
             $this->escapeHtml($asset->altText()),
             $this->escapeHtml($asset->name())
@@ -28,7 +28,7 @@ if ($assetId) {
     </span>
     <?php else: ?>
     <span class="selected-asset" style="display: none;">
-        <img class="selected-asset-image"><div class="selected-asset-name"></div>
+        <img loading="lazy" class="selected-asset-image"><div class="selected-asset-name"></div>
     </span>
     <?php endif; ?>
     <span class="no-selected-asset">

diff --git a/application/view/common/asset-options.phtml b/application/view/common/asset-options.phtml
@@ -9,7 +9,7 @@ $form->prepare();
 $selectedAssetTemplate = '
 <h3><span class="selected-asset-name">' . $translate('No Asset') . '</span></h3>
 <span class="selected-asset">
-<img class="selected-asset-image">
+<img loading="lazy" class="selected-asset-image">
 <div class="selected-asset-name"></div>
 <input type="hidden" name="selected-asset-id" class="selected-asset-id">
 <span class="none-selected">' . $translate('[No asset selected]') . '</span>

diff --git a/application/view/omeka/site-admin/index/theme-selector.phtml b/application/view/omeka/site-admin/index/theme-selector.phtml
@@ -28,7 +28,7 @@ $this->headScript()->appendFile($this->assetUrl('js/site-theme.js', 'Omeka'));
         <span class="error"><?php echo sprintf($translate('This theme requires Omeka S %s'), $theme->getIni('omeka_version_constraint')); ?></span>
         <?php endif; ?>
 
-        <div class="theme-thumbnail"><img src="<?php echo $this->escapeHtml($thumbnailUrl); ?>"></div>
+        <div class="theme-thumbnail"><img loading="lazy" src="<?php echo $this->escapeHtml($thumbnailUrl); ?>"></div>
 
         <h4><?php echo $this->escapeHtml($theme->getName()); ?></h4>
         <div class="theme-meta">

diff --git a/application/view/omeka/site-admin/index/theme.phtml b/application/view/omeka/site-admin/index/theme.phtml
@@ -20,7 +20,7 @@ $fallbackThumbnailUrl = $this->assetUrl('img/theme.jpg', 'Omeka');
     <div class="current-theme<?php echo Manager::STATE_ACTIVE !== $currentTheme->getState() ? ' invalid' : ''; ?>">
         <?php $localThumbnailUrl = OMEKA_PATH . $currentTheme->getThumbnail(); ?>
         <?php $absoluteThumbnailUrl = $this->basePath() . $currentTheme->getThumbnail(); ?>
-        <div class="theme-thumbnail"><img src="<?php echo $escape((file_exists($localThumbnailUrl)) ? $absoluteThumbnailUrl : $fallbackThumbnailUrl); ?>"></div>
+        <div class="theme-thumbnail"><img loading="lazy" src="<?php echo $escape((file_exists($localThumbnailUrl)) ? $absoluteThumbnailUrl : $fallbackThumbnailUrl); ?>"></div>
 
         <div class="current-theme-info">
             <h3>