Imporve image lazy loading

This commit is contained in:
2026-01-28 12:15:08 +01:00
parent 43fc752535
commit 80e3aa95d8
5 changed files with 47 additions and 80 deletions

View File

@@ -67,17 +67,17 @@ class Output
$genThumbW = (int)max(1, (int)round($thumbW * $thumbScale));
$genThumbH = (int)max(1, (int)round($thumbH * $thumbScale));
// Build placeholder URL from config (DokuWiki media ID)
$placeholderStyle = '';
$placeholderId = $syntax ? trim((string)$syntax->getConf('thumb_placeholder')) : '';
if ($placeholderId !== '' && function_exists('ml')) {
$placeholderUrl = ml($placeholderId, ['w' => $thumbW, 'h' => $thumbH], true, '&');
$placeholderStyle = ' style="--luxtools-placeholder: url(' . hsc($placeholderUrl) . ')"';
}
/** @var \Doku_Renderer_xhtml $renderer */
$renderer = $this->renderer;
$renderer->doc .= '<div class="luxtools-plugin luxtools-gallery" data-luxtools-gallery="1">';
global $ID;
$pageId = isset($ID) ? (string)$ID : '';
if (function_exists('cleanID')) {
$pageId = (string)cleanID($pageId);
}
$renderer->doc .= '<div class="luxtools-plugin luxtools-gallery" data-luxtools-gallery="1"' . $placeholderStyle . '>';
foreach ($this->files as $item) {
$url = $this->itemWebUrl($item, !empty($params['randlinks']));
@@ -88,39 +88,14 @@ class Output
$caption = $label;
}
// Use ThumbnailHelper to get thumbnail info
$imagePath = isset($item['path']) && is_string($item['path']) ? $item['path'] : '';
if ($imagePath !== '' && is_file($imagePath)) {
// Extract root and local from full path for helper
$root = $this->basedir;
$local = '';
if (str_starts_with($imagePath, $root)) {
$local = substr($imagePath, strlen($root));
}
$thumb = ThumbnailHelper::getThumbnail(
$root,
$local,
$pageId,
$genThumbW,
$genThumbH,
$thumbQ,
$placeholderId !== '' ? $placeholderId : null
);
$initialSrc = hsc($thumb['url']);
$dataThumb = $thumb['isFinal'] ? '' : ' data-thumb-src="' . hsc($thumb['thumbUrl']) . '"';
} else {
// Fallback: use URL directly
$thumbUrl = $this->withQueryParams($url, [
'thumb' => 1,
'w' => $genThumbW,
'h' => $genThumbH,
'q' => $thumbQ,
]);
$initialSrc = hsc($thumbUrl);
$dataThumb = '';
}
// Build thumbnail URL - rely on native loading="lazy" for deferred loading
$thumbUrl = $this->withQueryParams($url, [
'thumb' => 1,
'w' => $genThumbW,
'h' => $genThumbH,
'q' => $thumbQ,
]);
$thumbSrc = hsc($thumbUrl);
$renderer->doc .= '<a'
. ' href="' . $safeUrl . '"'
@@ -132,8 +107,7 @@ class Output
. '>';
$renderer->doc .= '<img'
. ' class="luxtools-thumb"'
. ' src="' . $initialSrc . '"'
. $dataThumb
. ' src="' . $thumbSrc . '"'
. ' alt=""'
. ' width="' . $thumbW . '"'
. ' height="' . $thumbH . '"'