feat(frontend): replace lazy loading with zibll lazysizes
This commit is contained in:
kate522 committed
1 parent
02571eecd6
commit
435ee1daa7
78 files changed
+1515
-909
No files matched your search
@@ -342,30 +342,6 @@ if (!function_exists('aksrt_renderer_resolve_images')) {
|
||||
}
|
||||
}
|
||||
|
||||
if (!function_exists('aksrt_renderer_lazyload_config')) {
|
||||
/**
|
||||
* Small lazyload config subset for post cards.
|
||||
*
|
||||
* @return array<string,mixed>
|
||||
*/
|
||||
function aksrt_renderer_lazyload_config(): array {
|
||||
if (class_exists('\AKSRT\Settings\Settings')) {
|
||||
$lazy = \AKSRT\Settings\Settings::get_lazyload_config();
|
||||
return [
|
||||
'enabled' => !empty($lazy['enabled']) && !empty($lazy['posts_thumb_enabled']),
|
||||
'placeholder_url' => (string) ($lazy['placeholder_url'] ?? ''),
|
||||
'blur' => !empty($lazy['blur']),
|
||||
];
|
||||
}
|
||||
|
||||
return [
|
||||
'enabled' => false,
|
||||
'placeholder_url' => '',
|
||||
'blur' => false,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
if (!function_exists('aksrt_renderer_thumb_ratio_value')) {
|
||||
/**
|
||||
* Convert ratio tokens like 4:3 to CSS aspect ratio values.
|
||||
|
||||
@@ -169,10 +169,11 @@ if (!function_exists('aksrt_renderer_mini')) {
|
||||
$thumb_html = '';
|
||||
$target_attr = !empty($cfg['target_blank']) ? ' target="_blank"' : '';
|
||||
if ($cfg['show_thumb'] && !empty($data['has_img'])) {
|
||||
$lazy = $data['lazy'];
|
||||
$thumb_img = !empty($lazy['enabled']) && !empty($data['has_real_img'])
|
||||
? '<span class="aksrt-skeleton"></span><img class="' . (!empty($cfg['thumb_fit']) && $cfg['thumb_fit'] === 'contain' ? 'fit-contain' : 'fit-cover') . ' aksrt-lazy lazyload" data-src="' . esc_url($data['img_url']) . '" src="' . esc_url($lazy['placeholder_url']) . '" alt="' . esc_attr($data['title']) . '">'
|
||||
: '<img class="fit-cover" src="' . esc_url($data['img_url']) . '" alt="' . esc_attr($data['title']) . '"' . (!empty($data['has_real_img']) ? ' loading="lazy"' : '') . '>';
|
||||
$fit_class = !empty($cfg['thumb_fit']) && $cfg['thumb_fit'] === 'contain' ? 'fit-contain' : 'fit-cover';
|
||||
$thumb_attr = !empty($cfg['thumb_lazy'])
|
||||
? aksrt_get_lazy_attr('lazy_posts_thumb', (string) $data['img_url'], $fit_class)
|
||||
: ' class="' . esc_attr($fit_class) . '" src="' . esc_url($data['img_url']) . '"';
|
||||
$thumb_img = '<img' . $thumb_attr . ' alt="' . esc_attr($data['title']) . '">';
|
||||
|
||||
$thumb_html = '<a href="' . esc_url($data['permalink']) . '" class="item-thumbnail" aria-label="' . esc_attr($data['title']) . '"' . $target_attr . '>' . $thumb_img . '</a>';
|
||||
}
|
||||
|
||||
@@ -20,9 +20,6 @@ if (!function_exists('aksrt_renderer_collect_post_data')) {
|
||||
return [];
|
||||
}
|
||||
|
||||
$lazy = aksrt_renderer_lazyload_config();
|
||||
$lazy['enabled'] = !empty($lazy['enabled']) && !empty($cfg['thumb_lazy']);
|
||||
|
||||
$images = aksrt_renderer_resolve_images($post_id, $cfg);
|
||||
$gallery_images = array_slice($images['gallery'], 0, $cfg['multi_thumb_limit']);
|
||||
$is_mult_thumb = !empty($cfg['multi_thumb_enabled'])
|
||||
@@ -71,7 +68,6 @@ if (!function_exists('aksrt_renderer_collect_post_data')) {
|
||||
'resource_strip' => $resource_strip,
|
||||
'is_resource' => function_exists('aksrt_is_resource_post') ? aksrt_is_resource_post($post_id) : false,
|
||||
'is_sticky' => is_sticky($post_id),
|
||||
'lazy' => $lazy,
|
||||
'thumb_ratio_css' => aksrt_renderer_thumb_ratio_value((string) $cfg['thumb_ratio']),
|
||||
'thumb_ratio_key' => (string) $cfg['thumb_ratio'],
|
||||
];
|
||||
@@ -110,19 +106,17 @@ if (!function_exists('aksrt_renderer_thumb')) {
|
||||
return '';
|
||||
}
|
||||
|
||||
$lazy = $data['lazy'];
|
||||
$img = (string) $data['img_url'];
|
||||
$title = (string) $data['title'];
|
||||
$href = (string) $data['permalink'];
|
||||
$is_sticky = !empty($data['is_sticky']);
|
||||
$has_real_img = !empty($data['has_real_img']);
|
||||
|
||||
if ($has_real_img && !empty($lazy['enabled'])) {
|
||||
$img_html = '<span class="aksrt-skeleton"></span>'
|
||||
. '<img class="' . (!empty($cfg['thumb_fit']) && $cfg['thumb_fit'] === 'contain' ? 'fit-contain' : 'fit-cover') . ' aksrt-lazy lazyload" data-src="' . esc_url($img) . '" src="' . esc_url($lazy['placeholder_url']) . '" alt="' . esc_attr($title) . '">';
|
||||
} else {
|
||||
$img_html = '<img class="' . (!empty($cfg['thumb_fit']) && $cfg['thumb_fit'] === 'contain' ? 'fit-contain' : 'fit-cover') . '" src="' . esc_url($img) . '" alt="' . esc_attr($title) . '"' . ($has_real_img ? ' loading="lazy"' : '') . '>';
|
||||
}
|
||||
$fit_class = !empty($cfg['thumb_fit']) && $cfg['thumb_fit'] === 'contain' ? 'fit-contain' : 'fit-cover';
|
||||
$img_attr = !empty($cfg['thumb_lazy'])
|
||||
? aksrt_get_lazy_attr('lazy_posts_thumb', $img, $fit_class)
|
||||
: ' class="' . esc_attr($fit_class) . '" src="' . esc_url($img) . '"';
|
||||
$img_html = '<img' . $img_attr . ' alt="' . esc_attr($title) . '">';
|
||||
|
||||
$sticky_html = ($is_sticky && !empty($cfg['badge_show']))
|
||||
? '<badge class="img-badge left jb-red">' . esc_html__('置顶', 'aksrt') . '</badge>'
|
||||
@@ -164,17 +158,11 @@ if (!function_exists('aksrt_renderer_mult_thumb')) {
|
||||
return '';
|
||||
}
|
||||
|
||||
$lazy = $data['lazy'];
|
||||
$html = '<a class="thumb-items contain" href="' . esc_url($data['permalink']) . '" aria-label="' . esc_attr($data['title']) . '">';
|
||||
|
||||
foreach (array_slice($data['gallery_images'], 0, 4) as $image) {
|
||||
$html .= '<span>';
|
||||
if (!empty($lazy['enabled'])) {
|
||||
$html .= '<span class="aksrt-skeleton"></span>'
|
||||
. '<img class="fit-cover aksrt-lazy lazyload" data-src="' . esc_url($image) . '" src="' . esc_url($lazy['placeholder_url']) . '" alt="">';
|
||||
} else {
|
||||
$html .= '<img class="fit-cover" src="' . esc_url($image) . '" alt="" loading="lazy">';
|
||||
}
|
||||
$html .= '<img' . aksrt_get_lazy_attr('lazy_posts_thumb', (string) $image, 'fit-cover') . ' alt="">';
|
||||
$html .= '</span>';
|
||||
}
|
||||
|
||||
@@ -277,7 +265,7 @@ if (!function_exists('aksrt_renderer_meta')) {
|
||||
|
||||
$left = [];
|
||||
if (!empty($cfg['show_author'])) {
|
||||
$left[] = '<item class="meta-author flex ac"><img src="' . esc_url($data['avatar_url']) . '" alt="" class="avatar-mini" width="20" height="20" loading="lazy"><name class="meta-name">' . esc_html($data['author_name']) . '</name></item>';
|
||||
$left[] = '<item class="meta-author flex ac"><img' . aksrt_get_lazy_attr('lazy_avatar', (string) $data['avatar_url'], 'avatar-mini', aksrt_get_lazy_thumb('sm')) . ' alt="" width="20" height="20"><name class="meta-name">' . esc_html($data['author_name']) . '</name></item>';
|
||||
}
|
||||
if (!empty($cfg['show_date'])) {
|
||||
$left[] = '<item class="meta-time">' . esc_html($data['time_ago']) . '</item>';
|
||||
|
||||
Reference in new issue
Block a user