Files
ptp/static/js/image-fade.js
T
Kirik 1696f47fe9 Redesign typography, add image rounding and smooth loading
- Global headings: drop ALL CAPS, use sentence case + weight 700
- Post cards: refined date (small/uppercase/muted), cleaner title hierarchy
- Single post: date metadata style, subtitle no-italic, body line-height 1.75
- Logo frame (#header .logo): border-radius 12px
- All images: border-radius 8px (posts), 6px (gallery)
- Smooth lazy-load: CSS fadeIn animation + JS fallback (image-fade.js)
- Cache-busting: typography CSS with Hugo timestamp query string
- Trip card: replace broken gallery link with direct Elbrus S3 image URL

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-09 23:38:59 +02:00

42 lines
1.6 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
// Плавное появление lazy-loaded изображений
// Работает с img[loading="lazy"] — добавляет класс .loaded после загрузки
(function () {
function onImageLoad(img) {
img.classList.add('loaded');
}
// Обработать все lazy-loaded изображения
document.querySelectorAll('img[loading="lazy"]').forEach(function (img) {
if (img.complete && img.naturalHeight > 0) {
// Уже загружено (из кэша)
onImageLoad(img);
} else {
img.addEventListener('load', function () {
onImageLoad(img);
});
// На случай ошибки — всё равно показать (без анимации)
img.addEventListener('error', function () {
onImageLoad(img);
});
}
});
// Для динамически добавляемых изображений (MutationObserver)
if ('MutationObserver' in window) {
new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
mutation.addedNodes.forEach(function (node) {
if (node.nodeName === 'IMG' && node.getAttribute('loading') === 'lazy') {
if (node.complete && node.naturalHeight > 0) {
onImageLoad(node);
} else {
node.addEventListener('load', function () { onImageLoad(node); });
node.addEventListener('error', function () { onImageLoad(node); });
}
}
});
});
}).observe(document.body, { childList: true, subtree: true });
}
})();