https://vestnikkui.ru/bundles/journals/js/front-image-fallback.js

1(function () {
2    var body = document.body;
3    var avatarFallbackSrc = body.getAttribute('data-avatar-fallback-src') || '';
4    var legacyCoverFallbackSrc = body.getAttribute('data-cover-fallback-src') || '';
5
6    function isCoverContainer(node) {
7        return node && node.classList && (
8            node.classList.contains('catalog-image')
9            || node.classList.contains('journal-cover')
10            || node.classList.contains('detail-cover-card')
11            || node.classList.contains('issue-cover')
12        );
13    }
14
15    function applyCoverContainerFallback(img, parent) {
16        img.classList.add('is-broken');
17        if (!parent.querySelector('.cover-fallback')) {
18            var fallback = document.createElement('div');
19            fallback.className = 'cover-fallback';
20            parent.appendChild(fallback);
21        }
22    }
23
24    function applyAvatarFallback(img) {
25        var fallbackSrc = img.getAttribute('data-avatar-fallback-src') || avatarFallbackSrc;
26
27        if (!fallbackSrc || img.getAttribute('src') === fallbackSrc) {
28            return;
29        }
30        img.classList.add('is-broken');
31        img.setAttribute('src', fallbackSrc);
32    }
33
34    function applyLegacyCardFallback(img) {
35        var fallbackSrc = img.getAttribute('data-cover-fallback-src') || legacyCoverFallbackSrc;
36
37        if (!fallbackSrc || img.getAttribute('src') === fallbackSrc) {
38            return;
39        }
40        img.classList.add('is-broken');
41        img.setAttribute('src', fallbackSrc);
42    }
43
44    function applyFallback(img) {
45        if (!img || img.tagName !== 'IMG') {
46            return;
47        }
48
49        var parent = img.parentNode;
50
51        if (
52            img.classList.contains('avatar')
53            || img.classList.contains('author-avatar')
54            || img.getAttribute('data-image-role') === 'avatar'
55        ) {
56            applyAvatarFallback(img);
57            return;
58        }
59
60        if (isCoverContainer(parent)) {
61            applyCoverContainerFallback(img, parent);
62            return;
63        }
64
65        if (parent && parent.classList && parent.classList.contains('content-block') && parent.classList.contains('info-block') && !img.classList.contains('no-fallback')) {
66            applyLegacyCardFallback(img);
67        }
68    }
69
70    function sweepBrokenImages() {
71        var images = document.querySelectorAll('img');
72        images.forEach(function (img) {
73            var src = (img.getAttribute('src') || '').trim();
74            if (!src) {
75                applyFallback(img);
76                return;
77            }
78            if (img.complete && img.naturalWidth === 0) {
79                applyFallback(img);
80            }
81        });
82    }
83
84    document.addEventListener('error', function (event) {
85        applyFallback(event.target);
86    }, true);
87
88    document.addEventListener('DOMContentLoaded', sweepBrokenImages);
89    window.addEventListener('load', sweepBrokenImages);
90})();