Imporve image lazy loading
This commit is contained in:
@@ -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 . '"'
|
||||
|
||||
Reference in New Issue
Block a user