kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): replace lazy loading with zibll lazysizes

Browse Source
This commit is contained in:
kate522
2026-08-18 01:33:38 +08:00
parent 02571eecd6
commit 435ee1daa7
78 changed files with 1515 additions and 909 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/WidgetSystem/FormRenderer.php
+1 -1
View File
@@ -151,7 +151,7 @@ final class FormRenderer {
private static function upload(string $id, string $name, string $value): void {
echo '<div class="aksrt-widget-upload">';
if ($value !== '') {
echo '<img src="' . esc_url($value) . '" alt="" loading="lazy">';
echo '<img src="' . esc_url($value) . '" alt="">';
}
echo '<input class="widefat" type="url" id="' . esc_attr($id) . '" name="' . esc_attr($name) . '" value="' . esc_attr($value) . '">';
echo '<button type="button" class="button aksrt-widget-upload__choose">' . esc_html__('选择媒体', 'aksrt') . '</button> <button type="button" class="button-link-delete aksrt-widget-upload__remove">' . esc_html__('移除', 'aksrt') . '</button></div>';
src/WidgetSystem/PostRenderer.php
+3 -1
View File
@@ -90,6 +90,8 @@ final class PostRenderer {
return $html . '</nav>';
}
$label = $mode === 'infinite' ? __('继续加载', 'aksrt') : __('加载更多', 'aksrt');
return '<button class="aksrt-widget-load-more" type="button" data-next-page="' . (int) ($page + 1) . '" data-mode="' . esc_attr($mode) . '">' . esc_html($label) . '</button>';
$class = $mode === 'infinite' ? 'aksrt-widget-load-more ias-btn lazyload' : 'aksrt-widget-load-more';
$action = $mode === 'infinite' ? ' lazyload-action="ias"' : '';
return '<button class="' . $class . '"' . $action . ' type="button" data-next-page="' . (int) ($page + 1) . '" data-mode="' . esc_attr($mode) . '">' . esc_html($label) . '</button>';
}
}
src/WidgetSystem/RendererHelpers.php
+7 -4
View File
@@ -20,12 +20,11 @@ final class RendererHelpers {
return $link['target'] === '_blank' ? ' target="_blank" rel="noopener noreferrer"' : '';
}
public static function image(string $url, string $alt = '', string $class = ''): string {
public static function image(string $url, string $alt = '', string $class = '', string $key = 'lazy_other', string $lazy_src = ''): string {
if ($url === '') {
return '';
}
return '<img' . ($class !== '' ? ' class="' . esc_attr($class) . '"' : '')
. ' src="' . esc_url($url) . '" alt="' . esc_attr($alt) . '" loading="lazy">';
return '<img' . aksrt_get_lazy_attr($key, $url, $class, $lazy_src) . ' alt="' . esc_attr($alt) . '">';
}
public static function lines(string $value): array {
@@ -49,7 +48,11 @@ final class RendererHelpers {
}
$media .= self::image((string) ($item['image'] ?? ''), $title, 'aksrt-media-card__image');
if (!empty($item['video'])) {
$media .= '<video class="aksrt-media-card__video" src="' . esc_url((string) $item['video']) . '" muted loop playsinline preload="metadata"></video>';
$video = esc_url((string) $item['video']);
$video_attr = aksrt_is_lazy('lazy_other')
? ' class="aksrt-media-card__video lazyload" src="" data-src="' . $video . '"'
: ' class="aksrt-media-card__video" src="' . $video . '"';
$media .= '<video' . $video_attr . ' muted loop playsinline preload="metadata"></video>';
}
$body = '<span class="aksrt-media-card__body"><strong>' . esc_html($title) . '</strong>';
if (!empty($item['description'])) {
src/WidgetSystem/Renderers/GeneralRenderer.php
+12 -2
View File
@@ -67,14 +67,24 @@ final class GeneralRenderer {
return RendererHelpers::empty_state(__('请配置视频地址', 'aksrt'));
}
$ratio = (string) $i['ratio'];
return '<div class="aksrt-widget-video aksrt-widget-video--' . esc_attr(str_replace(':', '-', $ratio)) . '" data-video-url="' . $url . '" data-video-poster="' . esc_url((string) $i['poster']) . '" data-autoplay="' . (!empty($i['autoplay']) ? '1' : '0') . '" data-muted="' . (!empty($i['muted']) ? '1' : '0') . '"><video controls playsinline preload="metadata"' . (!empty($i['autoplay']) ? ' autoplay' : '') . (!empty($i['muted']) ? ' muted' : '') . (!empty($i['poster']) ? ' poster="' . esc_url((string) $i['poster']) . '"' : '') . '><source src="' . $url . '"></video><p class="aksrt-widget-media-error" role="alert" aria-live="assertive" hidden>' . esc_html__('视频加载失败，请稍后重试。', 'aksrt') . '</p></div>';
if (aksrt_is_lazy('lazy_other')) {
$video_attr = ' class="lazyload" src="" data-src="' . $url . '"';
$poster_attr = !empty($i['poster']) ? ' data-poster="' . esc_url((string) $i['poster']) . '"' : '';
} else {
$video_attr = ' src="' . $url . '"';
$poster_attr = !empty($i['poster']) ? ' poster="' . esc_url((string) $i['poster']) . '"' : '';
}
return '<div class="aksrt-widget-video aksrt-widget-video--' . esc_attr(str_replace(':', '-', $ratio)) . '" data-video-url="' . $url . '" data-video-poster="' . esc_url((string) $i['poster']) . '" data-autoplay="' . (!empty($i['autoplay']) ? '1' : '0') . '" data-muted="' . (!empty($i['muted']) ? '1' : '0') . '"><video controls playsinline preload="metadata"' . $video_attr . $poster_attr . (!empty($i['autoplay']) ? ' autoplay' : '') . (!empty($i['muted']) ? ' muted' : '') . '></video><p class="aksrt-widget-media-error" role="alert" aria-live="assertive" hidden>' . esc_html__('视频加载失败，请稍后重试。', 'aksrt') . '</p></div>';
}
private static function render_embed(array $i): string {
if (empty($i['url'])) {
return RendererHelpers::empty_state(__('请配置嵌入地址', 'aksrt'));
}
return '<div class="aksrt-widget-embed" style="--aksrt-embed-ratio:' . esc_attr((string) (float) $i['ratio']) . '%"><iframe src="' . esc_url((string) $i['url']) . '" loading="lazy" referrerpolicy="strict-origin-when-cross-origin"' . (!empty($i['allow_fullscreen']) ? ' allowfullscreen' : '') . ' title="' . esc_attr__('嵌入内容', 'aksrt') . '"></iframe></div>';
$src_attr = aksrt_is_lazy('lazy_other')
? ' class="lazyload" src="" data-src="' . esc_url((string) $i['url']) . '"'
: ' src="' . esc_url((string) $i['url']) . '"';
return '<div class="aksrt-widget-embed" style="--aksrt-embed-ratio:' . esc_attr((string) (float) $i['ratio']) . '%"><iframe' . $src_attr . ' referrerpolicy="strict-origin-when-cross-origin"' . (!empty($i['allow_fullscreen']) ? ' allowfullscreen' : '') . ' title="' . esc_attr__('嵌入内容', 'aksrt') . '"></iframe></div>';
}
private static function render_media_cards(array $i): string {
src/WidgetSystem/Renderers/SliderRenderer.php
+10 -4
View File
@@ -16,13 +16,19 @@ final class SliderRenderer {
continue;
}
$link = RendererHelpers::link((array) ($slide['link'] ?? []));
$media = !empty($slide['background_video'])
? '<video src="' . esc_url((string) $slide['background_video']) . '" muted loop playsinline preload="metadata"></video>'
: RendererHelpers::image((string) $slide['background'], (string) ($slide['title'] ?? ''), 'swiper-lazy');
if (!empty($slide['background_video'])) {
$video = esc_url((string) $slide['background_video']);
$video_attr = aksrt_is_lazy('lazy_sider')
? ' class="lazyload" src="" data-src="' . $video . '"'
: ' src="' . $video . '"';
$media = '<video' . $video_attr . ' muted loop playsinline preload="metadata"></video>';
} else {
$media = RendererHelpers::image((string) $slide['background'], (string) ($slide['title'] ?? ''), '', 'lazy_sider', aksrt_get_lazy_thumb('lg'));
}
$layers = '';
foreach ((array) ($slide['layers'] ?? []) as $layer) {
if (!empty($layer['image'])) {
$layers .= '<img class="aksrt-slide-layer" src="' . esc_url((string) $layer['image']) . '" alt="" data-swiper-parallax="' . (int) ($layer['parallax'] ?? 0) . '" data-swiper-parallax-scale="' . esc_attr((string) ((float) ($layer['scale'] ?? 100) / 100)) . '">';
$layers .= '<img' . aksrt_get_lazy_attr('lazy_sider', (string) $layer['image'], 'aksrt-slide-layer', aksrt_get_lazy_thumb('lg')) . ' alt="" data-swiper-parallax="' . (int) ($layer['parallax'] ?? 0) . '" data-swiper-parallax-scale="' . esc_attr((string) ((float) ($layer['scale'] ?? 100) / 100)) . '">';
}
}
$copy = '<div class="aksrt-slide-copy is-' . esc_attr((string) ($slide['text_align'] ?? 'left-bottom')) . '"><h3>' . esc_html((string) ($slide['title'] ?? '')) . '</h3><p>' . esc_html((string) ($slide['description'] ?? '')) . '</p></div>';